美文网首页
权限设置 element - ui 树形控件

权限设置 element - ui 树形控件

作者: 晴天守候 | 来源:发表于2019-10-10 10:46 被阅读0次
权限设置 element - ui 树形控件 父级半选状态id和选中子级id一起传给后台 回显去掉父级半选状态id。

部分代码:

<el-tree :data="treeData"
             show-checkbox
             :props="defaultProps"
             ref="treeData"
             node-key="id"
             default-expand-all
             highlight-current
             :default-checked-keys="defaultArr"
             @check-change="getChecked">
</el-tree>
data() {
            return {
                treeData: [],
                resourceIds:[],
                defaultArr:[],
                defaultProps: {
                    children: 'childrenNode',
                    label: 'name'
                }
            };
        },
created(){
        this.treeData = JSON.parse(sessionStorage.getItem("treeData"));
        this.getRoleDetail();
},
methods:{
      getRoleDetail:{//详情接口
          let obj = {
                 params:{
                    id:this.getId
                 }
           }
          this.$axios.get(this.$Api.getRoleDetail,obj).then(response => {
                 let newArr = [];
                 if (response.data.code == 200) {
                        this.ruleForm.roleName = response.data.content.roleName;
                        response.data.content.resourceIds.forEach(item=>{
                            this.checked(item,this.treeData,newArr)
                        });
                        this.defaultArr = newArr;
                  }       
          });     
       },
       getChecked(data,CheckedNodes){//传给后台的id
                /*var parentArr = this.$refs.treeData.getHalfCheckedKeys();// 获取选中子节点的父节点id(包括半选状态)
                var childeArr = this.$refs.treeData.getCheckedKeys();// 获取选中子节点id,当全部子节点被选中时才会选中父节点id
                var arr = childeArr.concat(parentArr);*/

                this.resourceIds = this.$refs.treeData.getCheckedKeys().concat(this.$refs.treeData.getHalfCheckedKeys()); //选中子节点id和其父节点id
            },
        checked(id,data,newArr) {//方法提取封装
                data.forEach(item => {
                    if (item.id == id) {
                        if (item.childrenNode.length == 0) {
                            newArr.push(item.id)
                        }
                    } else {
                        if (item.childrenNode.length != 0) {
                            this.checked(id, item.childrenNode, newArr)
                        }
                    }
                })
       }
}

参考博客:https://blog.csdn.net/jiangjiang_ing/article/details/85163472

相关文章

网友评论

      本文标题:权限设置 element - ui 树形控件

      本文链接:https://www.haomeiwen.com/subject/aymquctx.html