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)

posted @ 2022-11-10 16:53  猖狂的小山猪  阅读(2650)  评论(0编辑  收藏  举报