vue+antd权限树的回显[前端处理数据]

接着上篇文章vue+antd权限树的回显，前端对数据的处理

在本次项目中最后选择前端对数据的处理：

具体原因：点击树1的应用，树2回显是对应的菜单，但是当用户在选完应用1的值后，然后再选择应用2的菜单时，返回应用1刚才选择的内容清空了，之所以清空是因为对树2反显的接口又进行了一次请求，导致刚才选中的内容清空，所以选择前端进行对数据处理。

 

需要实现的效果：

这是前端对数据的处理，有部分注释如果还有不懂的可以留言或者私信笔者乐意讲解思路，如有不足，也可以提一下。

 await postAction(this.url.getMenuAndButtonByAppId, {
        appId: record.key,
        roleId: this.roleId,
      })
        .then((res) => {
          let menuList = res.result
          const dealTreeData = (menuList) => {
            const data = menuList.map((item) => ({
              key: item.key,
              title: item.name,
              children: item.children && item.children.length ? dealTreeData(item.children) : null,
            }))
            return data
          }
          this.menuTreeData = dealTreeData(menuList)
          // 权限树的反显
          function menuId(menuList, menuArr, result = []) {
            menuList.find((item) => {
              if (menuArr.includes(item.key) && !item.children) {
                result.push(item.key)
              }
              if (item.children) menuId(item.children, menuArr, result)
            })
            return result
          }
          /**注: this.menuTreeData:是组装成树结构 this.checkedKeysObj[record.key]是后端返回来的需要授权的标识 */
          this.menuCheckedKeys = menuId(this.menuTreeData, this.checkedKeysObj[record.key])
        })
        .finally(() => {
          this.loading = false
        })