需求
记录下最近项目遇到的奇怪需求：使用el-tree实现树状图的正向级联和反向不级联，简单说就是父级被选中子集节点也被选中，子集节点被选中所有父级节点也要被选中，而子集节点取消选中父级节点依然是选中状态......上图：
大致就是这么个意思，历经坎坷终于搞出来了！！！
思路
将el-tree的默认勾选机制取消，将处理过的数据手动渲染；
1、check-strictly:true; // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false，设置为true则每一级勾选都相互独立
2、统一处理数据：勾选节点时反向递归出所有父级节点，再递归出所有子集节点，存储
3、统一渲染存储的数据
具体实现
html:
v-loading="treeLoading"
:check-strictly="checkAbiut"
:ref="'tree' + index"
default-expand-all
show-checkbox
class="tree-line underTabsTree"
:data="treeData"
:props="defaultProps"
node-key="id"
:indent="0"
:default-checked-keys="defaultChecked"
@check-change="(data, checked, indeterminate) => handleNodeClick(data, checked, indeterminate, index)">
data:
treeLoading: false,
checkAbiut: true,
treeData: [],
defaultProps: {
children: "children",
label: "label"
},
defaultChecked: []
methods:
flatArry(list, flatList) { // 将树的数据扁平化处理
for (let i = 0; i < list.length; i++) {
flatList.push(list[i]);
if (list[i].children.length > 0) {
this.flatArry(list[i].children, flatList);
}
}
},
getParent(list, data) { // 获取勾选节点的所有父级节点（反向递归），push到数组
if (data.pid != null) {
let flatList = [];
let faData = [];
this.flatArry(this.treeData, flatList);
faData = flatList.filter(item => {
return item.id == data.pid;
});
if (list.indexOf(faData[0].id) == -1) {
list.push(faData[0].id);
}
this.getParent(list, faData[0]); // 选中
}
},
getSon(list, data) { // 获取勾选节点的所有子节点，push到数组
for (let x = 0; x < data.children.length; x++) {
if (list.indexOf(data.children[x].id) == -1) {
list.push(data.children[x].id);
}
this.getSon(list, data.children[x]);
}
},
conseSon(list, data) { // 取消勾选时将所有子节点设为‘’
for (let x = 0; x < data.children.length; x++) {
if (list.indexOf(data.children[x].id) != -1) {// 数组里有
list[list.indexOf(data.children[x].id)] = "";
this.conseSon(list, data.children[x]);
}
}
},
editPermission(list, data, slected) { // 勾选对数据进行处理
if (slected) { // 选中
if (list.indexOf(data.id) == -1) { // 数组里没有
list.push(data.id);
this.getSon(list, data);
if (data.id != '0' && data.id != '' && data.id != null) {
this.getParent(list, data);
}
}
} else { // 取消选中
if (list.indexOf(data.id) != -1) { // 数组里有
list[list.indexOf(data.id)] = "";
this.conseSon(list, data);
}
}
},
handleNodeClick(data, checked, indeterminate, index) { // 勾选触发的函数，choosedList为存储最终数据的数组
this.editPermission(this.choosedList, data, checked);
this.$nextTick(() => { // 一定要放在nextTick否则可能渲染不出来
let choosedList = this.choosedList.filter((item) => { return item != ''})
this.$refs[`tree${index}`][0].setCheckedKeys(choosedList); // this.$refs[`tree${index}`][0]写法时因为tree在v-for模块里的，若是只有一个单独的tree则[0]不需要复制代码
});
},
总结
这个需求改了很多版，导致最后这一版有一种无从下手的感觉，后来静下心来捋一捋，思路清晰了写的也很快，希望对你有点帮助。PS：本人能力有限，仅供参考，欢迎交流，勿喷谢谢。