elementui table 树形 勾选父节点时勾选全部子节点

装载出处
侵删

需要加以下三个方法
@select=“selectChange”
@select-all=“selectAllChange”
@selection-change=“selectionChangeHandler”

<el-table
      ref="multiTable"
      v-loading="crud.loading"
      lazy
      :load="getMenus"
      :data="list"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      @select="selectChange"
      @select-all="selectAllChange"
      @selection-change="selectionChangeHandler"
    >

     /**
     * 用于树形表格多选，单选的封装
     * @param selection
     * @param row
     */
    selectChange(selection, row) {
      // 如果selection中存在row代表是选中，否则是取消选中
      if (selection.find(val => { return this.getDataId(val) === this.getDataId(row) })) {
        if (row.children) {//注意这里的children是后台返回数据的children字段
          row.children.forEach(val => {
            this.$refs.multiTable.toggleRowSelection(val, true)
            selection.push(val)
            if (val.children) {
              this.selectChange(selection, val)
            }
          })
        }
      } else {
        this.toggleRowSelection(selection, row)
      }
    },

    /**
     * 用于树形表格多选, 选中所有
     * @param selection
     */
    selectAllChange(selection) {
      // 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中
      if (selection && selection.length === this.list.length) {
        selection.forEach(val => {
          this.selectChange(selection, val)
        })
      } else {
        this.$refs.multiTable.clearSelection()
      }
    },

    // 选择改变
    selectionChangeHandler(val) {
      this.selections = val
      this.unique(this.selections,'id')//这里有一个问题就是这样点选完之后，数据有重复，所以根据id手动去重，期待优化
    },

    /**
     * 切换选中状态
     * @param selection
     * @param data
     */
    toggleRowSelection(selection, data) {
      if (data.children) {//注意这里的children也是后台返回数据的children字段
        data.children.forEach(val => {
          this.$refs.multiTable.toggleRowSelection(val, false)
          if (val.children) {
            this.toggleRowSelection(selection, val)
          }
        })
      }
    },  

    getDataId(data) {
      return data['id']
    },
    
    //数组去重
  unique(arr,i){
        for(let i=0;i<arr.length;i++){
            for(let j=i+1;j<arr.length;j++){
              if(arr[i].id == arr[j].id){
                    arr.splice(j,1)
                    j--
              }
            }
        }
   }，
  //列表树懒加载
  getMenus(tree, treeNode, resolve) {
      const params = { pid: tree.id }
      setTimeout(() => {
        crudMenu.getMenus(params).then(res => {
          resolve(res.content)
        })
      }, 100)
    },