实现三级嵌套树结构时,勾选三级里的子节点时候父节点也会自动勾选,当子节点大于一项时候取消勾选某一子结构时父节点不变;当子节点只有一项时父节点也会自动取消勾选
import StandardTablePage from '@/components/StandardTablePage';
// 用户选中某一行
userSelect(record, selected, selectedRows, nativeEvent) {
let { selectedRowKeys } = this.state;
let recordIdList = [];
function getArrEqual(arr1, arr2) {
let newArr = [];
for (let i = 0; i < arr2.length; i++) {
for (let j = 0; j < arr1.length; j++) {
if (arr1[j] === arr2[i]) {
newArr.push(arr1[j]);
}
}
}
return newArr;
}
function handleIdInfo(item, selected) {
let rows = idObj[item.id];
if (!selected) {
let parentChildren = [];
let newArrSelect = [];
if (idObj[rows.parentId] && idObj[rows.parentId].children.length > 0) {
idObj[rows.parentId].children.map(itemRen => {
return parentChildren.push(itemRen.id);
});
newArrSelect = getArrEqual(parentChildren, selectedRowKeys);
if (newArrSelect.length > 1) {
selectedRowKeys = selectedRowKeys.filter(filterKey => filterKey !== item.id);
} else {
selectedRowKeys = selectedRowKeys.filter(filterKey => filterKey !== item.id);
if (rows.parentId !== 1) {
handleIdInfo(idObj[rows.parentId], selected);
}
}
}
} else {
recordIdList.push(rows.id);
if (rows.parentId !== 1) {
handleIdInfo(idObj[rows.parentId], selected);
}
}
}
if (record.id !== 1) handleIdInfo(record, selected);
// this.getChildrenIdList(record.children, recordIdList); // 取消
// 选中
if (selected) {
selectedRowKeys = [...selectedRowKeys, ...recordIdList, 1];
}
this.setState({ selectedRowKeys: [...new Set(selectedRowKeys)] });
}
// 设置索引
setRowIndex(dataList) {
dataList.map(val => {
rowIndex++;
//得到他的整数的序列号(忽略了多级嵌套)
val['rowIndex'] = rowIndex;
//如果children存在且有长时
if (val.children && val.children.length) {
this.setRowIndex(val.children);
} else {
//如果children为空的话将children删除
delete val.children;
}
});
}
render() {
const { pagination, selectedRowKeys, rowss } = this.state;
const {
toAuthorize: { loading, total },
} = this.props;
const rowSelection = {
selectedRowKeys,
onSelect: this.userSelect.bind(this),
};
return (
<StandardTablePage
loading={loading}
pagination={{ ...pagination, total }}
rowKey={'id'}
data={rowss}
columns={this.columns}
scroll={{ y: 600 }}
onRow={this.handleChangeTable}
rowSelection={rowSelection}
>
</StandardTablePage>
);
}