element树形列表同时选中子父节点以及回显的实现
程序员文章站
2024-01-03 13:29:34
...
首先调用element里的tree树形控件:
<el-tree
:data="dataTree"
ref="tree"
:props="props"
accordion
show-checkbox
node-key="id"
updateKeyChildren=""
@check-change="handleCheckChange"
>
</el-tree>
然后通过@check-change事件来获取节点选中状态发生变化时的回调
// 树形方法_复选框
handleCheckChange(data) {
console.log(data)
debugger;
// 选中当前子节点以及父节点
let res = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
console.log(res)
}
这里的res返回的就是你点击的子节点以及父节点发生变化时的回调
回显的实现
首先给一个按钮
<el-button
type="text"
size="small"
@click="updateHandle(scope.row)"
>
通过scope.row来获取这一行的内容,然后拿到已经拥有的权限id
updateHandle(data) {
console.log(data);
// window.location.reload()
if (data.menuIds) {
var tempArr = data.menuIds.split(","); //用,分割
this.defaultCheck = tempArr; //创建一个空数组来接受tempArr
this.$refs.tree.setCheckedKeys(this.defaultCheck) //实现回显
// this.defaultCheck = Object.assign([], this.defaultCheck, tempArr);
}
},