1. :default-checked-keys="midPwList" //给它赋值就会默认勾选中
<el-table
:data="tableData"
border
:row-class-name="rowClassName"
ref="multipleTable"
>
<el-table-column label="操作" width="300">
<template #default="scope">
<el-button type="text" size="medium" @click="quanxian(scope.row)">权限</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="权限"
v-model="quan_xian"
width="30%"
:before-close="cancel1"
center>
<el-tree
ref="tree"
:data="datalist"
show-checkbox //复选框
node-key="id"
:default-checked-keys="midPwList"
:props="{children: 'children',label: 'menuName',value:'id'}">
<template #default="{node,data}">
<span class="custom-tree-node" >
<span>{{ node.label }}</span>
<span>
<el-tag closable size="mini" v-for="(item,index) in data.btnBean" @close="cancel(item.id)" :key="index">{{item.btnname}}</el-tag>
</span>
</span>
</template>
</el-tree>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel1">取 消</el-button>
<el-button type="primary" @click="quanxian1" :loading="loading">确 定</el-button>
</span>
</template>
</el-dialog>
export default{
data(){
return{
loading:false,
quan_xian:false,//权限false
datalist: [], //获取树数据
midPwList:[], //设置默认勾选数组
arrid:[]//id数组集合
}
},
methods:{
//获取后端返回数据的权限id集合给树默认勾选赋值
quanxian(){
this.quan_xian=true
this.$nextTick(()=>{
this.midPwList = JSON.parse(JSON.stringify(row.listRole));
})
},
//清空所选node
clearnode(){
let node = this.$refs.tree.getNode(this.datalist[0].id).parent;
node.childNodes.map(val=>{
val.checked = false;
if(val.childNodes&&val.childNodes.length>0){
val.childNodes.map(value=>{
value.checked = false
})
}
})
},
//取消
cancel1(){
this.quan_xian=false;
this.clearnode();
},
//权限修改保存的时候
quanxian1(){
//获取选中树的数组id集合 如:[10,11]
let arr=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
this.arrid=arr;
if(this.arrid.length>0){
this.loading=true;
this.$http({
url: Api.updateAccountMenu.url,
method: Api.updateAccountMenu.method,
data:{
id:this.addform.userid,
listRole:this.arrid,
}
}).then(res=>{
this.loading=false;
if(res.status==200){
this.quan_xian=false;
this.search();
this.$message({type:'success',message:res.message});
}
})
}else{
this.$message({type:'error',message:'权限菜单不能为空,请选择权限菜单!'});
}
}
}
vue 权限树el-etree设置默认勾选
于 2021-06-24 19:35:50 首次发布