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

最新推荐文章于 2025-04-18 12:51:05 发布

丁先生320

最新推荐文章于 2025-04-18 12:51:05 发布

阅读量1.6k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_56383764/article/details/128704909

版权

文章讨论了在Vue.js应用中使用el-tree组件时遇到的数据回显错误，即设置default-checked-keys后，父节点默认全选，即使子节点未全选。解决方案是通过获取半选和已选节点的ID，动态构建新的显示选中数组。在`showkeyEve`函数中，根据后台返回的数据更新tree的显示，避免半选状态导致的全选问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误形态：数据回显默认全选

理想形态：根据数据回显，若子节点未全选，父节点则半选

错误原因：当使用包含父节点的数组设置组件的 default-checked-keys，父节点下的所有节点都会被选中。

解决代码：

<el-tree
      :data="dataTree"
      highlight-current
      show-checkbox
      :check-strictly="checkStrictly"
      node-key="id"
      :props="defaultProps"
      @check-change="getCheckedKeys"
      :default-checked-keys="showChecked"
      ref="tree">
    </el-tree>

//传给后台
 
var parentArr = this.$refs.menuTree.getHalfCheckedKeys();
var childeArr = this.$refs.menuTree.getCheckedKeys();
var arr = childeArr.concat(parentArr);


showkeyEve(){
      var params = "roleId=" + this.id +"&moduleId=" +this.modId
      //显示员工权限
      getRoleFunAuth(params).then(data => {
         if(this.id !="" && this.id !=null && this.id !=undefined ){
            //更新数据时的树形显示 （去掉半选状态id避免视图半选状态id下全选）
            var arr = data; //后台返回的id组成的数组
            var newArr = [];
            var item = '';
            arr.forEach(item=>{
                this.checked(item,this.dataTree,newArr)
            })
                this.showChecked = newArr;
        }          
      })
    },
    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 ){
                  this.checked(id,item.children,newArr)
                }
          }
      });
    },