<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>
接口数据
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'
});
}
});
},
改变最底层节点的样式，使他横着排列。下面的效果
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]);
}