element-ui 使用树形结构时，父级元素被选中导致底下没有被选中的子级元素也被选中的解决方案

最新推荐文章于 2024-06-17 15:06:06 发布

lucky_Mather

最新推荐文章于 2024-06-17 15:06:06 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/lucky_Mather/article/details/127851176

版权

Vue.js el-tree 权限管理节点选择数据处理

关键词由CSDN通过智能技术生成

1.html

       <el-tree :data="rightsList" v-model="CreatForm.rights" ref="tree"
                        :default-checked-keys="checkedKeys" @check="handleCheckChange" getCheckedKeys show-checkbox
                        node-key="id">
                    </el-tree>

data:

/****权限列表 */

rightsList: [],

checkedKeys: []

methods

        //获取所有选中节点组成的数组
        handleCheckChange() {

            let parentArr = this.$refs.tree.getHalfCheckedKeys();
            let childeArr = this.$refs.tree.getCheckedKeys();
            let arr = childeArr.concat(parentArr);
            this.CreatForm.rights = arr;
            this.checkedKeys = arr
        },
        //获取需要修改的员工的权限
        async getRoleRigthsList(id) {
            const { data: res } = await this.$http.get(
                `apiadmin/role/detail?srid=${id}`,
            )
            if (res.status == 1) {
                if (res.data.rights && res.data.rights.length) {
                    let arr = []
                    res.data.rights.forEach(ele => {
                        arr.push(parseInt(ele))
                    })
                    this.checkedKeys = arr
                    this.CreatForm.rights = arr
                    //处理获取到的参数
                    let newArr = [];
                    if (this.checkedKeys && this.checkedKeys.length !== 0) {
                        this.checkedKeys.forEach(item => {
                            this.checked(item, this.rightsList, newArr);
                        });
                        this.checkedKeys = newArr;
                    }

                }

            } else {
                this.$message.error(res.message)
            }
        },
        checked(id, data, newArr) {
            data.forEach(item => {
                if (parseInt(item.smid) == id) {
                    if (!item.children || (item.children && item.children.length == 0)) {
                        newArr.push(parseInt(item.smid));
                    }
                } else {
                    if (item.children != null && item.children.length != 0) {
                        this.checked(id, item.children, newArr);
                    }
                }

            });

            // console.log("newArr", newArr);

        },