elemenui-----tree树形结构踩过的坑

Posted 2021-01-19 yinxiaohua

1、首先，必须保证数据结构是符合要求的，参照官方文档的数据结构：http://element-cn.eleme.io/#/zh-CN/component/tree

2、做了本公司的用户管理：后台返回的树形菜单数据里既包含页面又包含操作权限（页面操作按钮），数据大致是这样：

"menus":[{"children":[{"level":2,"menuIcon":"icon-topology","menuUrl":"/es/topology","menuId":"AA","menuName":"数据分析","sortNum":"11","parentId":"A"}],"level":1,"menuId":"A","menuName":"系统监测管理平台","sortNum":"1","parentId":""},{"children":[{"children":[{"operationId":1,"operationName":"add_user","operationNameZh":"新增用户"}],"level":2,"menuIcon":"icon-account","menuUrl":"/config/admin","menuId":"CA","menuName":"用户管理","sortNum":"21","parentId":"C"}],"level":1,"menuId":"C","menuName":"配置管理","sortNum":"2","parentId":""}]}}

操作权限里面这样的结构树形结构不能展示，所以需要自己将循环meaus，在操作权限里加上meauId和meauName（至于取值，用操作权限里的相对应得值就好）,这样保证了能在一个树里将操作权限正常显示出来，能正常勾选；

3、那么问题又来了，在编辑用户时，要回显用户勾选的页面和操作权限，这时，又得像上面一样自己在操作权限里加上meauId和meauName（至于取值，用操作权限里的相对应得值就好），如果后台接口不要求分开传递页面和操作权限的值，直接用tree的getCheckedKeys将选中的id传给后台即可。如果要求分开呢，就得将数组里的页面id和操作权限id区分开来，注意：假如二级菜单下没有选择页面，只选了菜单，记得要将二级页面的id也带上传递给后台。

相应片段代码：

//页面权限选中或者取消
handleCheckChange () {
  this.allcheckedKeys = []
  this.halfCheckedNodes = []
  this.checkedMenus =[]
  this.checkOperationList =[]
  this.allcheckedKeys = this.$refs.tree.getCheckedKeys()
  this.halfCheckedNodes = this.$refs.tree.getHalfCheckedKeys()
  this.halfCheckedNodes.splice(this.halfCheckedNodes.indexOf(‘0‘), 1)
  this.allcheckedKeys.map(item => {
    if (isNaN(item)) {
      this.checkedMenus.push(item)
    } else if (parseFloat(item)) {
      this.checkOperationList.push(item)
    }
  })
  this.halfCheckedNodes.map(key => {
    this.checkedMenus.push(key)
  })
  this.checkedMenus = Array.from(new Set(this.checkedMenus))
  this.checkOperationList = Array.from(new Set(this.checkOperationList))
  console.log(this.checkOperationList)
  console.log(this.checkedMenus)
}

//获取树形菜单
getMenuList () {
  let menuList = JSON.parse(sessionStorage.getItem(‘user‘)).menus
  menuList.map((pItem, index) => {
    if(pItem.menuId === ‘C‘) {
      menuList.splice(index, 1)
    }
    if (pItem.children) {
      if (!pItem.menuName) {
        this.$set(pItem, ‘menuName‘, pItem.operationNameZh)
        this.$set(pItem, ‘menuId‘, pItem.operationId + ‘‘)
      }
      pItem.children.map(cItem => {
        if (cItem.children) {
          if (!cItem.menuName) {
            this.$set(cItem, ‘menuName‘, cItem.operationNameZh)
            this.$set(cItem, ‘menuId‘, cItem.operationId + ‘‘)
          }
          cItem.children.map(lItem => {
            if (!lItem.menuName) {
              this.$set(lItem, ‘menuName‘, lItem.operationNameZh)
              this.$set(lItem, ‘menuId‘, lItem.operationId + ‘‘)
            }
          })
        }
      })
    }
  })

//根据返回数据勾选页面权限
setCheckedMenus(checkData) {
  let checkedKeys = [];
  checkData.map(pItem => {
    if (pItem.children) {
      pItem.children.map(cItem => {
        if (cItem.children) {
          cItem.children.map(lItem => {
            if (lItem.operationId) {
              checkedKeys.push(lItem.operationId+ ‘‘)
            } else if (lItem.menuId) {
              checkedKeys.push(lItem.menuId)
            }
          })
        } else {
          checkedKeys.push(cItem.menuId)
        }
      })
    }
  })
  this.$refs[‘tree‘].setCheckedKeys(checkedKeys)