React三层多选框联动/三级复选框联动实现方法 (Vue同理数据驱动思想)
效果如图:代码如下(有ant design就可以跑了):import { Checkbox, Collapse } from 'antd';import React, { PureComponent } from 'react';//假设这是后端返回的数据const params = {"authTree": [{"authName": "商场...
·
静态效果图:
动态效果图:
代码(安装ant design就可以跑了):
import { Checkbox, Collapse } from 'antd';
import React, { PureComponent } from 'react';
//假设这是后端返回的数据
const params = {
"authTree": [
{
"authName": "商场数据分析",
"authId": 1,
"children": [{
"authName": "数据概览",
"authId": 3,
"children": [
{ "authName": "今日客流", "authId": 6 },
{ "authName": "整体趋势", "authId": 7 }
]
},
{
"authName": "数据概览2",
"authId": 4,
"children": [
{ "authName": "今日客流2", "authId": 8 },
{ "authName": "整体趋势2", "authId": 9 }
]
}]
},
{
"authName": "商场数据分析2",
"authId": 2,
"children": [{
"authName": "数据概览3",
"authId": 5,
"children": [
{ "authName": "今日客流3", "authId": 10 },
{ "authName": "整体趋势3", "authId": 11 }
]
}]
}
],
"checkedList": [6, 7, 11]
}
class AuthoritySettingComponent extends PureComponent {
constructor(props) {
super(props);
this.state = {
authTree: [],
checkedList: [],
};
this.itemHandle = this.itemHandle.bind(this);
}
componentDidMount() {
// 后端返回的数据,转成前端要用的数据保存页面使用
const authTree = params.authTree;
const checkedList = params.checkedList;
this.setState({
authTree,
checkedList,
}, () => {
this.authTreeFun();
});
}
// 转成前端要用的数据
authTreeFun() {
const checkedList = this.state.checkedList;
checkedList.forEach((item) => {
this.itemHandle(item);
});
}
// 代码三级联动核心就在这里
itemHandle(authId, checked = true) {
const authTree = [...this.state.authTree];
authTree.forEach((item1) => {
if (item1.authId === authId) {
item1.checked = checked;
if (item1.children) {
item1.children.forEach((item2) => {
item2.checked = checked;
if (item2.children) {
item2.children.forEach((item3) => {
item3.checked = checked;
});
}
});
}
} else {
// 反向思路: 保存子选项框的个数, 子选项选中就-1, 等于0说明都选中了, 父选项就勾上
let temp1 = item1.children.length;
item1.children.forEach((item2) => {
if (item2.authId === authId) {
item2.checked = checked;
if (item2.children) {
item2.children.forEach((item3) => {
item3.checked = checked;
});
}
} else {
let temp2 = item2.children.length;
item2.children.forEach((item3) => {
if (item3.authId === authId) {
item3.checked = checked;
}
item3.checked ? temp2 -= 1 : temp2;
});
temp2 === 0 ? item2.checked = true : item2.checked = false;
}
// 选中-1, 未选中不动
item2.checked ? temp1 -= 1 : temp1;
});
// 长度是0, 父选项框就勾选
temp1 === 0 ? item1.checked = true : item1.checked = false;
}
});
this.setState({
authTree,
});
}
render() {
const { Panel } = Collapse;
const authTreeMap = this.state.authTree.map((item1) => (
// Panel是手风琴
<Panel
key={item1.authId}
header={(
<span onClick={(e) => { e.stopPropagation(); }}>
{/* 一级复选框(向下操控二级三级) */}
<Checkbox
name={item1.authId.toString()}
checked={item1.checked}
onClick={(e) => {
this.itemHandle(parseInt(e.target.name), e.target.checked);
}}
>
{item1.authName}
</Checkbox>
</span>
)}
>
{/* 二级复选框(向下操控三级,向上联动一级) */}
{item1.children.map((item2) => (
<div key={item2.authId}>
<Checkbox
name={item2.authId.toString()}
checked={item2.checked}
onClick={(e) => {
this.itemHandle(parseInt(e.target.name), e.target.checked);
}}
>
{item2.authName}
</Checkbox>
<span>|</span>
{/* 三级复选框(向上联动二级一级) */}
{item2.children.map((item3) => (
<Checkbox
key={item3.authId}
name={item3.authId.toString()}
checked={item3.checked}
onClick={(e) => {
this.itemHandle(parseInt(e.target.name), e.target.checked);
}}
>
{item3.authName}
</Checkbox>
))}
</div>
))}
</Panel>
));
return (
<div>
<Collapse expandIconPosition="right">
{authTreeMap}
</Collapse>
</div>
);
}
}
export default AuthoritySettingComponent;
更多推荐
已为社区贡献20条内容
所有评论(0)