1、界面元素
<el-tree :data="datass"
check-strictly
show-checkbox
default-expand-all
node-key="id"
ref="metaNodeTree"
highlight-current
:props="{children: 'child',label: 'name'}"
@check-change="handleMetaNodeClick">
</el-tree>
2、js实现
//被选择的节点Id
metaNodeCheckedId: []
handleMetaNodeClick(data, checked) {
let res = this.$refs.metaNodeTree.getCheckedNodes();
let currCheckedNode = [];//当前选中的节点
let resultCheckedNode = [];//最终选中的节点
res.forEach(item => {
currCheckedNode.push(item.id);
});
if (checked) {
//清除上次的选择，重新记录本次选中的节点
currCheckedNode.forEach(item => {
if (!arrayContains(this.metaNodeCheckedId, item)) {
resultCheckedNode.push(item);
}
});
this.$refs.metaNodeTree.setCheckedKeys(resultCheckedNode);
} else {
this.metaNodeCheckedId = [];
}
this.metaNodeCheckedId = [...new Set(currCheckedNode.concat(resultCheckedNode))];
//数组是否包含指定元素
function arrayContains(array, id) {
for (let i = 0; i < array.length; i++) {
if (array[i] == id) return true;
}
return false;
}
},
