ant Design vue 树表格table级联选择
1、先写模板，注意：rowSelection
<template>
<a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" />
</template>
2、照搬官方api
rowSelection #
选择功能的配置。
data() {
return {
selectedRowKeys:[]
}
},
computed: {
rowSelection() {
const { selectedRowKeys } = this;
return {
selectedRowKeys,
onChange: this.onSelectChange,
hideDefaultSelections: true,
onSelect: this.onSelect,//触发级联的方法
};
}
},
3、别眨眼，级联方法已就位，处理层级数据，理所当然想到了递归
methods: {
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
onSelect(record, selected){//每个复选框点击都会触发
const selectrows=[record.key];
if(record.hasOwnProperty('children')){
const generator = (record) => {
//这里做一个递归查找
record.forEach(item => {
selectrows.push(item.key)
if (item.children && item.children.length > 0) {
generator(item.children,)
}
})
}
generator(record.children)
}
const newselect=this.selectedRowKeys.filter(item=>!selectrows.includes(item))
//选中和取消选中的级联
selected ? (this.selectedRowKeys = [...this.selectedRowKeys,...selectrows]):(this.selectedRowKeys = newselect)
}
}
至此树表格级联选择的功能已完成，关键代码就是onSelect，so Easy