element-ui tree问题,设置默认选中的节点。点击的时候把获取的节点给后台。改变最底层节点的样式,使他横着排列

时间:2024-04-12 13:12:04

<el-tree
        :data="roledata"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"        
        :default-checked-keys="choosedRole"

         :render-content="renderContent"    //树节点的内容区的渲染 。把最底层节点加在这里
        @check-change="getCheckedKeys"   //只要有节点状态发生变化都会触发这个节点。所以有时候会点一个触发三次。判断了他的父亲节点和祖父节点的状态。最难得是这里啊,如果页面没有确认按钮。你只需在最后一次触发事件时去执行接口的函数。下面可以看到我用了延时。
        >
</el-tree>

接口数据

element-ui tree问题,设置默认选中的节点。点击的时候把获取的节点给后台。改变最底层节点的样式,使他横着排列

flag:false,

 

getRolePowerLists(){//被选中的
            this.listLoadingRole=true;
            getSchooRolePowerList({roleid:this.roleid}).then(res=>{
                if (res.code == 1) {
                this.listLoadingRole=false;
                  let data = res.data;
                  let arr = [];
                  for (let item of data) {
                    arr.push(item)
                  }
              this.$refs.tree.setCheckedKeys(arr);//获取已经设置的资源后渲染
              this.flag=false;   //为了避免一进来就调节点选中状态变化的函数  。先让他为false这样就不走下面的函数访问接口啦
              var that=this;
                  setTimeout(
                       function(){             
                        that.flag=true;
                       },
                       500)
               }    

         })
        },

getCheckedKeys(data, checked, indeterminate) {//节点选中状态变化的函数
               if(this.flag==true){
                   var that=this;that.flag=false;
                   setTimeout(      //延时加载,当第一次进去flag的true变成了false。所以第二次就不走这里了。过了500ms他去执行了访问接口的函数,这个时候
                       function(){             
                           that.api();   //访问接口给后台传数据是这个                        
                       },
                       500)

               }

        },     
        api(){//权限选择接口
            let para={
                roleid:this.roleid,
                actionid:this.$refs.tree.getCheckedKeys(true).toString(),
            }
            addSchoolRolePower(para).then((res)=>{//添加或者取消权限
                if(res.code==1){
                    this.$message({
                        message:res.msg,
                        type: 'success'
                    });
                   this.flag=true;//这里很重要。当他进来为true,你才可以再去访问那个延时的函数
                }else{
                    this.$message({
                        message:res.msg,
                        type: 'error'
                    });
                }
                
            });
        },

 

改变最底层节点的样式,使他横着排列。下面的效果

element-ui tree问题,设置默认选中的节点。点击的时候把获取的节点给后台。改变最底层节点的样式,使他横着排列

 mounted() {   

var _levelname = document.getElementsByClassName("levelname");  //levelname是上面的最底层节点的名字,查询,新增。。
        console.log(_levelname);
       setTimeout(function(){   //等到树都加载完了再去执行的这里
            for(var i = 0; i <_levelname.length; i++){
                _levelname[i].parentNode.style.cssFloat = 'left';     //最底层的节点,包括多选框和名字都让他左浮动
                _levelname[i].parentNode.style.styleFloat = 'left';
            }
      },2000)

}

    methods: {
            renderContent(h, { node, data, store }) {
                let classname = '';
                if(node.level == 3){
                    classname = '
levelname';
                }
                return (
                <span class={classname}>
                    <span>{node.label}</span>
                </span>);
            },

}

然后css里面增加

.el-tree-node__content{
    margin-bottom:10px;
}
.el-tree-node__content span.levelname{
    float:left;
    width:126px;
}

 

当你用    this.$refs.tree.setCheckedKeys(arr)设置选中的节点不起作用时,你可以试试换个思路。  

利用这个:default-checked-keys="choosedRole" 。改变choosedRole的值。

但是有时候改变了这个值也没作用,你可以用循环choosedRole这个数组。然后

 for(var j=0;j<choosedRole.length;j++){

this.$set(choosedRole,j,choosedRole[j]);

}