实现思路:
- 在点击按钮的时候显示弹框,复制element-ui里面树形组件,并显示树形控件
- 在点击确定按钮的时候,将树形结构选中的权限赋值个某个角色,通过调用接口,因为在点击确定按钮的时候,我们需要把添加权限的id的一个容器以一个数组的形式来传递,所以我们封装了一个专门把返回的所选权限的id值以逗号的形式放到resultArr数组里面的函数
- 封装函数之后的返回值回到组件里面,作为一个变量来进行接受
- :default-checked-keys=“checkArr”,通过这样形式的绑定,就可以再打开拥有树形控件的弹框里面进行树形初始化的一个效果
css代码块:
<!-- 树形控件 -->
<!--
:data="data" 指定数据源
show-checkbox 指定复选框模式
node-key="id" 指定树形结构的id标识
:default-expanded-keys="[1, 3]" 指定默认展开的id
:default-checked-keys="[5]" 指定默认选中的id
:props="defaultProps" 指定label和children的key
-->
<el-tree
ref="roletree"
:data="rightTree"
show-checkbox
node-key="id"
:default-checked-keys="checkArr"
:props="defaultProps"
default-expand-all
></el-tree>
// 点击弹框确定的代码
// 将树形结构选中的权限赋值个某个角色
async setRightToRole() {
//data怎么获取:data 是全部或部分选中的id '1,2,2,3,5,6,7,7,8'
//则返回目前半选中的节点所组成的数组
const arr1 = this.$refs.roletree.getHalfCheckedKeys();
// 全部选中
const arr2 = this.$refs.roletree.getCheckedKeys();
//合并全部选中和部分选中的id节点
const resultArr = [...arr1, ...arr2].join(",");
//调分配权限给角色的方法
// 第一个值为传递当前数据得id值,第二个值为传递选中id值得数组
const res = await setRightToRole(this.currentRoleId, {
rids: resultArr
});
console.log("调分配权限给角色的返回:", res);
this.dialogVisibleRight = false;
this.getRoleList();
},
// 打开分配权限的弹框
async roleRightOpen(role) {
this.currentRoleId = role.id;
//调用指定角色信息
// 封装一个获取Id的函数
const checkArr = treeToList(role);
this.checkArr = checkArr; // 将获取到的id返回到一个数组中,并与树形组件进行关联
const res = await getRightTree(); //获取树形控件得数据
this.rightTree = res.result;
this.dialogVisibleRight = true;
},
封装得函数
export function treeToList(tree){
let resultArr = [];
let tepArr = [];
//对传递过来得数组进行一个深拷贝
tepArr = tepArr.concat(JSON.parse(JSON.stringify(tree)))
// 如果tepArr有值就一直会不断得循环
while(tepArr.length){
var node = tepArr.shift(); // 去除数组首部的第一个元素
// children是内部数据自己定义得
if(node.children){
tepArr = tepArr.concat(node.children)
delete node['children']
}else{
resultArr.push(node.id) // 将深拷贝循环获取到的id值放到数组中
}
}
return resultArr
}
问题:为啥要用while循环?
while() { }语句,当括号内的内容为真的时候,就执行{ }中的语句。所以当while(true)出现的时候,就是表示程序一直执行{}中的语句,因为while()中始终为“真”。