Tree 树形控件 -- 树形结构角色权限添加和删除

        项目中需要使用到树形结构数据显示在某个页面中，这里结合 element-plue 中 el-tree 组件实现添加和删除账号权限功能。每个账号发送权限接口，返回的数据中包含所有权限数据，包含已拥有的权限和未拥有的权限。其数据结构多为树形结构（如图所示）。

树形结构权限数据显示效果

 

树形结构权限页面显示效果

        1.角色是否原本拥有权限，关键看返回数据中的 select 取值：true 表示已拥有，false 表示未拥有；

        2.id 作为每个权限的标识，具有唯一性；

        3.level 表示当前所在层级位于整个树形结构的第几层；

        4.children 表示当前层级的下一层级所包含的权限信息，以数组表示；

        5.name 则为权限名称，多用于页面权限名称显示。

        对数据结构有了较为清晰的认识，为后面对数据进行一些操作（数组遍历等）打下基础。现在我们的要求是：1.数据按照层级显示在页面中；2.根据数据返回结果，已有的权限在显示时前面需要勾选；3.可以对数据进行取消勾选或者添加勾选，点击确定时实现权限的修改操作（不管是添加还是删除，或者是一些删除一些添加）。

        数据显示在页面中，这里我们使用到element-plus 中的el-tree 组件Tree 树形控件 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/component/tree.html        组件的基础用法可以查看文档，这里有几个需要注意的组件属性和方法：

属性：
node-key="id" ：表示节点标识（我们用唯一标识 id 作为节点标识）
show-checkbox ：属性结构可选（每一项前面添加选框）
:props="defaultProps" ：使用之前需要在先声明 defaultProps ，其包含两项：children 和 label
const defaultProps = reactive({
  children: 'children',  // children 为下一层级子组件数组名称，名为children字段
  label: 'name', // label 为节点显示名称，以数据中 name 字段值作为名称显示
})
default-expand-all ：表示层级全部展开显示
:default-checked-keys="seletePermissionRole" ：表示已选中节点，值为数组，数组每一项由选中节点 id 组成
ref="tree" ：可通过ref选择el-tree组件实例

方法：
getCheckedKeys（）：返回一个数组 -- 若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组；
getHalfCheckedKeys（）：若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组

let tree = ref<any>()  // 先获取 el-tree 组件实例
tree.value.getCheckedKeys() // 获取选中节点 key 的 id 组成的数组
tree.value.getHalfCheckedKeys() // 获取半选中节点 key 的 id 组成的数组

        疑问？选中节点和半选中节点是什么呢？我们直接看图： 绿色框叫做半选中节点，只返回已选项 id 组成的数组；红色框叫做全选中节点，返回节点中所有项 id 组成的数组。

基础前提介绍的差不多啦，接下来是具体代码的实现。

        roleStore.allPermission ：是所有权限（值为所有权限 id 组成）；

        seletedPermissionRole ：是已有权限（值为已有权限 id 组成）；

         组件根据 seletedPermissionRole 中的每一项，去对比所有权限数组 roleStore.allPermission 中的 id 。如果对应，则默认勾选。既然是这样，我们需要从所有权限数组 roleStore.allPermission 中过滤出 select 为 true 的层级的权限 id 值，所有满足 select 为 true 的 id 组成一个数组，即得到seletedPermissionRole。该怎么筛选出所有满足条件的 id 组成一个数组呢？这里有一个方法：

// 权限管理-角色管理中筛选已选择的角色函数
export const filterSelectArr = (allData: any, initArr: any) => {
  allData.forEach((item: any) => {
    if (item.select && item.level == 4) {  // 满足 select 为 true 且 在第四层 level 为 4
      initArr.push(item.id)
    }
    if (item.children && item.children.length > 0) {
      filterSelectArr(item.children, initArr)
    }
  })
  return initArr
}

        filterSelectArr 函数第一个参数是所有数组，第二个参数是满足条件 id 构成的数组（我们需要得到的数组）。这里需要注意：使用到递归的方法 ---- 将当前层级的 children 子数组作为第一个参数层层遍历下去，最后返回的 initArr 即为已有权限 id 组成的数组，赋值给el-tree组件中 :default-checked-keys 属性。需要知道，这里的 :default-checked-keys 是动态绑定，也就是说数据可以让页面默认勾选，页面勾选后在数据中也有体现（因此此可作为调取修改权限接口的参数），如果是单独的组件，通过props传到组件中的，需要重新声明一个中间变量去接收；除此之外，函数中  forEach（）方法在后面会详细讲解。

        页面显示完成了，数组筛选完成了，接下来就是确认权限的添加和删除，开始调取修改权限接口。

调取接口修改用户权限

 

         可以看到，这里 permissionParams 是作为接口参数（也就是上面提到的）initArr ，这里是封装的组件，initArr 通过父组件 defineProps 传递过来的（最好只能读），所以我定义了一个变量 seletedPermissionRole 去接收。

        const arr = tree.value.getCheckedKeys() 得到目前全选中的 key 组成的数组； const arr1 = tree.value.getHalfCheckedKeys() 得到目前半选中的 key 组成的数组。那么两个数组拼接起来，则是所有当前选中的数组（作为修改权限参数的数组）: const permissionParams = arr.concat(arr1) 

         写到这儿，树形结构权限数据页面显示和 id 筛选，以及修改接口调取已经差不多啦！下面就补充一下一个数组方法：Array.prototype.forEach() 以及 数组拼接 Array.prototype.concat()

Array.prototype.forEach() - JavaScript | MDNforEach() 方法对数组的每个元素执行一次给定的函数。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEachArray.prototype.concat() - JavaScript | MDNconcat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concattips：同时，Array.prototype.concat() 也是实现浅拷贝的方法之一嗷~