vue项目中使用element中的tree

需求：常用菜单设置，拿到菜单tree，渲染，然后从菜单tree中增加/删除，展示结果放在右边

1、初始化菜单tree渲染(后台返回设置好的菜单，菜单tree中对应的项选中)

customMade() {
      // 处理树型结构数据
      let menu = sessionStorage.getItem('allMenu')
      this.$set(this, 'menu', JSON.parse(menu))
      let result = JSON.parse(
        JSON.stringify(this.menu).replace(/"name"/g, '"label"')
      )
      this.commonTreeData = this.treeReplace(result)

      this.checkList = JSON.parse(
        JSON.stringify(this.commonList).replace(/"name"/g, '"label"')
      ) // 初始化设置，统一字段名
      this.checkList = this.checkList.filter((item) => {
        // 过滤添加按钮
        return item.id
      })
      // 把选中的值映射到树型结构中选中
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(this.checkList)
      })
 },

treeReplace(result) {
      if(result && result.length > 0){
        result.forEach((item) => {
          if (item.hasOwnProperty('iTaskInfo')) {
            item.children = item.iTaskInfo.menu
            delete item.iTaskInfo
            this.treeReplace(item.children)
          }
        })
        return result
 }
    },

2、添加

btnAdd() {
      // 常用功能---添加方法
      let arr1 = this.$refs.tree.getCheckedNodes()
      arr1 = arr1.filter((item) => {
        return !item.hasOwnProperty('children')
      })
      let arr2 = this.checkList
      let diff = arr1.filter((item) => {
        return (
          arr2.findIndex((subItem) => {
            return subItem.id == item.id
          }) === -1
        )
      })
      // let obj = {}
      // Array.prototype.push.apply(arr1, arr2) // 数组合并
      // let result = arr1.reduce((item, next) => {
      //   obj[next.id] ? ' ' : (obj[next.id] = true && item.push(next)) // 数组去重
      //   return item
      // }, [])

      if (diff.length + this.checkList.length > 6) {
        
          //'配置功能不能超过6个',
          
      } else {
        this.addFlag = true
        diff.forEach((item) => {
          this.checkList.push(item)
        })
      }
      // }
    }

3、删除

btnDelete() {
    // 常用功能设置---删除方法
    // checkOne
    this.checkList = this.checkList.filter((item, index) => {
      return this.checkOne.indexOf(item.id) == -1
    })
    this.checkOne = []
    this.$nextTick(() => {
      this.$refs.tree.setCheckedNodes(this.checkList)
    })
 }