因为需要做一个权限管理,所以用到树形控件。
首先引入组件:
然后是data数据:
data(){
return{
subdata:[],//用户半选和全选的数据
choices:[],//在右边需展示出来的数据
power:[],//用户全选的数据
data4:[
{
title:'医生',
expand:false,//是否展开
children:[
{
title:'看诊',
expand:true,
children:[
{
title:'方法',
expand:true,
children:[
{title:'望'},{title:'闻'},{title:'问'},{title:'切'}
]
},
{
title:'写病历'
}
]
},
{
title:'开药',
expand:true,
children:[
{ title: '查看药房库存' }, { title: '进行开药' }
]
}
]
}
]
数据就会在页面上以树形结构的形式渲染出来:
树形结构
左边是权限选项,右边是所选权限,如何达到这样的效果和只获取用户所选的权限。
树形控件里提供了三个事件和三个方法,这里用到的是事件是@on-select-change,点击树节点时触发,返回值是当前选中的节点数组,当前项,用到的方法是getCheckedAndIndeterminateNodes(),用于获取选中及半选节点。ref="tree',这个属性一定要写,之后要获取的数据通过$refs.tree.data可获取。
首先是如何在右边显示用户选择的权限,要有层级关系,半选的选中的都要显示。
methods:{
choices(){
console.log("tree.data",this.$refs.tree.data);
this.choices = this.dg(this.$refs.tree.data);
this.subdata=this.$refs.tree.getCheckedAndIndeterminateNodes();//获取半选和全选的
this.power=this.subdata.filter(item =>{
return !item.children //因为filter只会返回true的布尔值,所以这里把没有子集的,也就是单个的权限返回出去,用this.power接收
})
console.log('power',this.power);
},
dg(data){
let s=[];
if(data.children != undefined){
for(let j=0; i
if(data.children[j].checked || data.children[j].indeterminate){//用到了递归,checked ,indeterminate这两个属性是组件上提供的,
//在浏览器上调试时可见,这是所选控件有子集的时候,比如说方法下有望闻问切四个子集,这里是把半选的控件展示上去
s.push({
title:data.children[j].title,
expand:true,
children:this.dg(data.children[j])
});
}
}
}else{
for(let i=0;i
if(data[i].checked||data[i].indeterminate){
s.push({
title:data[i].title,
expand:true,
children:this.dg(data[i])
});
}
}
}
console.log(s);
return s;
}
}
将用户选择的权限有层级关系的展示出来后,现在要做的是获取用户选择的权限,只需要全选的即可。这里用到的是iview提供的getCheckedAndIndeterminateNodes()方法。this.power里存放的就是用户选择的权限,然后通过按钮保存按钮提交到后台即可
//this.power里存放的就是用户选择的权限,然后通过按钮保存按钮提交到后台即可
this.axios({
method:'post',
url:'/setrole',
data:this.power
}).then(res =>{
console.log(res);
}).catch(err =>){
console.log(err)
}