java返回iview的树结构,iview-树形控件的使用（一）

因为需要做一个权限管理，所以用到树形控件。

首先引入组件：

然后是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)

}