树形控件
示例:codePen 请给点个小 ❤ ❤ 关键代码:映射函数
TIP
nodes 完整树json
selectedKeys 选中节点 id 数组
js
rangeMapping(nodes, selectedKeys) {
// 初始化返回数组
const ret = [];
// 遍历每个节点
nodes.forEach((node) => {
// 创建一个新节点,复制原节点的所有属性
const newNode = { ...node };
// 删除新节点的children属性,以避免递归时的无限循环
delete newNode.children;
// 处理子节点,如果原节点有children属性
if (node.children) {
newNode.children = this.rangeMapping(node.children, selectedKeys);
}
// 检查新节点的DICTIONARIES_ID是否在selectedKeys中,或是否有子节点
const isSelected = selectedKeys.includes(newNode.DICTIONARIES_ID);
const hasChildren = newNode.children && newNode.children.length > 0;
// 如果新节点被选中或有子节点,则将其添加到返回数组中
if (isSelected || hasChildren) {
ret.push(newNode);
}
});
// 返回处理后的节点数组
return ret;
},
⚠️当el-table里面嵌套el-tree组件的时候,fixed属性会导致无法正常获取实例,比如this.$refs.tree.getCheckedNodes(true)失效