|
@@ -14,11 +14,13 @@
|
|
|
<el-tree
|
|
<el-tree
|
|
|
ref="tree"
|
|
ref="tree"
|
|
|
show-checkbox
|
|
show-checkbox
|
|
|
|
|
+ check-strictly
|
|
|
:data="authData"
|
|
:data="authData"
|
|
|
node-key="id"
|
|
node-key="id"
|
|
|
:default-expand-all="true"
|
|
:default-expand-all="true"
|
|
|
:props="{ label: 'name' }"
|
|
:props="{ label: 'name' }"
|
|
|
:default-checked-keys="checkedKeys"
|
|
:default-checked-keys="checkedKeys"
|
|
|
|
|
+ @check="handleCheck"
|
|
|
>
|
|
>
|
|
|
<!-- <template v-slot="{ data }">
|
|
<!-- <template v-slot="{ data }">
|
|
|
<span>
|
|
<span>
|
|
@@ -126,6 +128,25 @@
|
|
|
/* 更新visible */
|
|
/* 更新visible */
|
|
|
updateVisible(value) {
|
|
updateVisible(value) {
|
|
|
this.$emit('update:visible', value);
|
|
this.$emit('update:visible', value);
|
|
|
|
|
+ },
|
|
|
|
|
+ handleCheck(data,node){
|
|
|
|
|
+ console.log(data);
|
|
|
|
|
+ const _this = this
|
|
|
|
|
+ // 获取当前节点是否被选中
|
|
|
|
|
+ const isChecked = this.$refs.tree.getNode(data).checked
|
|
|
|
|
+ // 如果当前节点被选中,则遍历上级节点和下级子节点并选中,如果当前节点取消选中,则遍历下级节点并取消选中
|
|
|
|
|
+ if(isChecked){
|
|
|
|
|
+ // 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中
|
|
|
|
|
+ data.children && setChildrenChecked(data.children,true)
|
|
|
|
|
+ }else{
|
|
|
|
|
+ // 如果节点取消选中,不做处理
|
|
|
|
|
+ }
|
|
|
|
|
+ function setChildrenChecked(node,isChecked){
|
|
|
|
|
+ node.forEach(item => {
|
|
|
|
|
+ item.children && setChildrenChecked(item.children,isChecked)
|
|
|
|
|
+ _this.$refs.tree.setChecked(item.id,isChecked)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|