权限设置 element - ui 树形控件父级半选状态id和选中子级id一起传给后台回显去掉父级半选状态id

最新推荐文章于 2024-01-30 10:15:30 发布

原创最新推荐文章于 2024-01-30 10:15:30 发布 · 6.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui #树形控件 #权限设置 #es6 #vue

element-ui 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Element UI中树形组件的高级使用技巧，包括如何获取半选中的节点ID，将全选和半选状态的节点ID传递给后台，以及如何在更新数据时正确显示树形结构的状态，避免半选状态导致的视图错误。

< el - tree
default - expand - all
:data = "treeData"
show - checkbox
node - key = "id"
:filter - node - method = "filterNode"
:default - checked - keys = "checkedKeys"
ref = "menuTree"
@check - change = "getNodeData"
:props = "defaultProps" >
</el - tree >

//传给后台

var parentArr = this.$refs.menuTree.getHalfCheckedKeys();
var childeArr = this.$refs.menuTree.getCheckedKeys();
var arr = childeArr.concat(parentArr);

//更新数据时的树形显示 （去掉半选状态id避免视图半选状态id下全选）

var arr = response.data; //后台返回的id组成的数组
var newArr = [];
var item = '';
arr.forEach(item=>{
     checked(item,this.treeData,newArr)
})
this.checkedKeys = newArr;


function checked(id,data,newArr){
 data.forEach(item => {
     if(item.id == id){
           if( item.children.length == 0 ){
                newArr.push(item.id)
            }
     }else{
          if( item.children.length !=0 ){
              checked(id,item.children,newArr)
           }
      }
   });
};