vue el-tree树形结构选中子节点,保持父节点选中
<!--菜单分配弹窗-->
<el-dialog title="菜单分配" :visible.sync="menuDialogVisible" width="30%">
<el-tree
:props="props"
:data="menuData"
node-key="id"
ref="tree"
:default-expanded-keys="expends"
:default-checked-keys="checks"
show-checkbox
:check-strictly="true"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span><i :class="data.icon"></i> {{ data.name }}</span>
</span>
</el-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="menuDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveRoleMenu()">确 定</el-button>
</div>
</el-dialog>
:check-strictly="true"这个参数很重要,check-strictly:表示在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false。
saveRoleMenu() {
console.log()
// 父级id获取到
const checkedkeys = this.$refs.tree.getHalfCheckedKeys()
//子节点的权限id
const id = this.$refs.tree.getCheckedKeys()
const ids = checkedkeys.concat(id)
// console.log(ids)
// console.log('父id',this.$refs.tree.getHalfCheckedKeys())
// console.log('子节点id', this.$refs.tree.getCheckedKeys())
// return
this.request.post("/role/roleMenu/" + this.roleId, ids).then(res => {
console.log(res)
if (res.code == '200') {
this.$message.success("绑定成功")
this.menuDialogVisible = false
} else {
this.$message.error(res.msg)
}
})
},
获取父节点的id:this.$refs.tree.getHalfCheckedKeys()
获取子节点的权限id:const id = this.$refs.tree.getCheckedKeys()
合并成一个数组发送给后台:const ids = checkedkeys.concat(id)