element ui 树形表格 + 复选框 事件

 <el-table
      ref="multipleTable"
      :data="dataList"
      style="width: 100%"
      row-key="catalogId"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column width="105" fixed>
        <template slot="header" slot-scope="scope">
          <span>全选</span>
          <el-checkbox v-model="checkouts" style="padding-left:10px" @change="checkAllIn(scope)" />
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checks"
            style="padding-left:10px"
            @change="checkChange(scope.row)"
          />
        </template>
      </el-table-column>
</el-table>

子带父  子不带父 两种场景 递归

// 复选框事件
    // 全选
    checkAllIn() {
      this.$refs.multipleTable.data.forEach((items) => {
        this.$set(items, 'checks', this.checkouts);
        if (items.children.length) {
          this.setChildren(items.children, this.checkouts);
        }
      });
      this.multipleSelection = [];
      this.selectionList(this.dataList);
      console.log(this.multipleSelection);
    },
    // 插槽复选框逻辑
    checkChange(row) {
      // 父选子
      if (row.children.length) {
        this.setChildren(row.children, row.checks);
      }
      // 子不带父
      this.multipleSelection = [];
      this.selectionList(this.dataList);
      if (row.checks) {
        this.checkouts = this.multipleSelection.length === this.multiple.length;
      } else {
        // 子取消选中
        this.checkouts = false;
      }
       //子带父
     // if (row.checks) {
     //   this.setFatherTrue(this.dataList,row)
     // } else {
     //   // 子取消选中
     //   this.checkouts = false;
     //   this.setFatherFalse(this.dataList,row)
     // }
     // this.multipleSelection = [];
     // this.selectionList(this.dataList);
      console.log(this.multipleSelection);
    },
    // 编辑多个子层级  父传子 递归
    setChildren(children, type) {
      children.forEach(j => {
        this.$set(j, 'checks', type);
        if (j.children.length) {
          this.setChildren(j.children, type);
        }
      });
    },
    // 子传父 取消选中 递归
    // setFatherFalse(list, item) {
    //   if (item.parentId !== -1) {
    //     list.forEach(j => {
    //       if (item.parentIds.indexOf(j.catalogId) > -1) {
    //         this.$set(j, 'checks', false);
    //         this.setFatherFalse(j.children, item);
    //       }
    //     });
    //   }
    // },
    // 子传父 选中 递归
    // setFatherTrue(list, item) {
    //   if (item.parentId !== -1) {
    //     item.parentIds.sort((a, b) => b - a).forEach(i => {
    //       list.forEach(j => {
    //         if (i === j.catalogId) {
    //           const type = j.children.every(i => i.checks === true);
    //           this.$set(j, 'checks', type);
    //         } else {
    //           this.setFatherTrue(j.children, item);
    //         }
    //       });
    //     });
    //   }
    //   this.checkouts = list.every(i => i.checks === true);
    // },
    // 递归遍历 所有选中的 项 push到multipleSelection ，multipleSelection做初始化后执行
    selectionList(list) {
      list.forEach(item => {
        if (item.checks) {
          this.multipleSelection.push(item);
        }
        if (item.children.length) {
          this.selectionList(item.children);
        }
      });
    },
    multipleLength(list) {
      list.forEach(item => {
        this.multiple.push(item);
        if (item.children.length) {
          this.multipleLength(item.children);
        }
      });
    },