element ui tree的相关技巧

1.获取所有的子节点

function getAllLeaf (data) {
  let result = []
  function getLeaf (data) {
    data.forEach(item => {
      if (!item.children) {
        result.push(item.path)
      } else {
        getLeaf(item.children)
      }
    })
  }
  getLeaf(data)
  return result
}

2.获取所有被选中的子节点，最后一层的节点checked为true时，做默认选中的效果

getDefaultLeaf(data) {
      let result = []
      function getLeaf(data) {
        data.forEach(item => {
          if (!item.children) {
            if (item.checked) {
              result.push(item.id)
            }
          } else {
            getLeaf(item.children)
          }
        })
      }
      getLeaf(data)
      return result
}

3. 获取所有选中的节点，包括半选中和选中

<el-tree
        ref="tree"
        :data="menuData"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :default-expand-all="true"
        :default-checked-keys="checkedKeys"
        style="height:500px;overflow:auto;"
        @check="handleNodeClick"
      ></el-tree>

handleNodeClick() {
      let res = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys())
      this.selectedIds = res
      // console.log(res, '被选中的节点')
    }

4.table表单里面根据按钮进行全部折叠隐藏的功能

hanldeExpand(value) {
      console.log(value)
      this.handleExpand(value)
    },
    handleExpand(isAss) {
      // 此判断是否为展开展开或折叠状态--若展开折叠是同一个按钮则无需传参和加此if
      if (this.isExpand == isAss) {
        return
      }
      this.isExpand = !this.isExpand
      this.$nextTick(() => {
        this.forArr(this.tableData, this.isExpand)
      })
    },
    // 遍历
    forArr(arr, isExpand) {
      arr.forEach(i => {
        this.$refs.myTable.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    }

5.编辑和修改公用一个dialog的时候，使用this.$refs[formName].resetFields()，需像下面样使用，否则无效

resetForm(formName) {
      this.$refs[formName].resetFields()
    },
if (type === 'add') {
        this.title = '添加菜单'
        this.isEdit = false
        this.submitType = 0
      } else if (type === 'edit') {
        // console.log(data, '菜单')
        this.isEdit = true
        this.submitType = 1
        this.title = '修改菜单'
        this.$nextTick(() => {
          this.form = Object.assign(
            {},
            {
              name: data.name,
              code: data.code,
              id: data.id
            }
          )
        })
      }

6.普通数组转化为tree结构做权限菜单

export function arrayToTree(data) {
  let result = []
  let map = {}
  if (!Array.isArray(data)) {
    //验证data是不是数组类型
    return []
  }
  data.forEach(item => {
    //建立每个数组元素id和该对象的关系
    map[item.id] = item //这里可以理解为浅拷贝，共享引用
  })
  data.forEach(item => {
    let parent = map[item.pId] || map[item.parentId] //找到data中每一项item的爸爸
    if (parent) {
      //说明元素有爸爸，把元素放在爸爸的children下面
      ;(parent.children || (parent.children = [])).push(item)
    } else {
      //说明元素没有爸爸，是根节点，把节点push到最终结果中
      result.push(item) //item是对象的引用
    }
  })
  return result //数组里的对象和data是共享的
}

以上是个人使用elementUI中的笔记总结，方便自己查看