vue+element-ui树形表多选，支持多层级联动

添加@select=“rowSelect” @select-all=“selectAll”

<el-table
        :data="tableData"
        ref="tableRef"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        select-on-indeterminate
        @select="rowSelect"
        @select-all="selectAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
        <el-table-column prop="distribution" label="订餐点" width="180" align="center"></el-table-column>
        <el-table-column prop="level" label="层级" align="center" width="120"> </el-table-column>
        <el-table-column prop="user" label="关联用户" align="center" width="160"> </el-table-column>
        <el-table-column prop="address" label="地址说明" align="center"> </el-table-column>
        <el-table-column prop="date" label="创建时间" align="center" width="200"> </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template>
            <el-button type="text" size="small" @click="openCodeDialog">查看二维码</el-button>
            <el-button type="text" size="small" @click="to_modify_distribution">编辑</el-button>
            <el-button type="text" size="small" @click="openAddNextDialog">新增下级</el-button>
            <el-button type="text" size="small" class="delete-txt-btn" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

1.遍历数据加上select字段，判断是否被选中
2.点击每一个节点数据的时候，去判断是否有子节点，有的话操作子节点（全选or全取消）
3.然后判断是否有父节点，如果有，拿到父节点，再去对父节点进行操作
我定义的规则（可根据需求重新自定义）：
当所有节点都被选中，父节点打勾，兄弟节点只要有一个节点没打勾，父节点要取消打勾

  import Vue from 'vue'
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          distribution: "一楼",
          level: "1",
          user: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02',
        }, {
          id: 2,
          distribution: "一楼",
          level: "1",
          user: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02',
          children: [{
            id: 21,
            distribution: "一楼",
            level: "1",
            user: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            date: '2016-05-02',
          }, {
            id: 22,
            distribution: "一楼",
            level: "1",
            user: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            date: '2016-05-02',
            children: [{
            id: 221,
            distribution: "一楼",
            level: "1",
            user: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            date: '2016-05-02',
            }, {
              id: 222,
              distribution: "一楼",
              level: "1",
              user: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              date: '2016-05-02',
              children: [{
              id: 2221,
              distribution: "一楼",
              level: "1",
              user: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              date: '2016-05-02',
              }]
            }]
          }]
        },
        selectFlag: false,
      }
    },
    methods: {
      toggleSelection(rows, flag) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.tableRef.toggleRowSelection(row, flag);
            if(row.children){
              this.toggleSelection(row.children, flag);
            }
          });
        }
      },
      rowSelect(selection,row){
        // 全选 or 取消全选
        if(selection.indexOf(row)>-1){
          this.toggleSelection(row.children, true);
          row.select=true
          if(row.children){
            this.addSelect(row.children,true)
          }
        }else if(selection.indexOf(row)==-1){
          this.toggleSelection(row.children, false);
          row.select=false
          if(row.children){
            this.addSelect(row.children,false)
          }
        }
        this.getParent(this.tableData,row)
      },
      // 获取父节点并操作
      // 当所有子节点取消选中，父节点也要取消选中；当所有子节点已选中，父节点也要相应选中
      getParent(data,row){
        data.forEach((item) => {
          //判断该行是否有子节点
          if (item.children) {
            //遍历子节点
            item.children.forEach((item2) => {
              //判断该节点是否为我点击的节点
              if (item2.id == row.id) {
                // 去遍历被点击节点的父节点
                if(item.children){
                  let rowParentFlag = true;
                  item.children.forEach((i) => {
                    rowParentFlag=i.select && rowParentFlag
                  })
                  // 当所有节点都被选中，父节点打勾
                  if(rowParentFlag){
                    this.$refs.tableRef.toggleRowSelection(item, true);
                    item.select=true
                    // 获取父节点的父节点进行判断
                    this.getParent(this.tableData,item)
                  }else{
                    // 兄弟节点只要有一个节点没打勾，父节点都要取消打勾
                    this.$refs.tableRef.toggleRowSelection(item, false);
                    item.select=false
                    // 获取父节点的父节点进行判断
                    this.getParent(this.tableData,item)
                  }
                }
              }else if(item.children){
                this.getParent(item.children,row)
              }
            });
          }
        });
      },
      selectAll(selection){
        if(!this.selectFlag){
          this.toggleSelection(selection, true);
          this.addSelect(this.tableData,true)
        }else{
          this.$refs.tableRef.clearSelection();
          this.addSelect(this.tableData,false)
        }
        this.selectFlag=!this.selectFlag
      },
      // 树形表多选，添加select字段区分当前行是否被选中
      // 为了：当所有子节点取消选中，父节点也要取消选中；当所有子节点已选中，父节点也要相应选中
      // element文档貌似没相关操作
      addSelect(data,flag){
        data.forEach((item,index)=>{
            Vue.set(item,'select',flag);
            if(data[index].children){
              this.addSelect(data[index].children,flag)
            }
        })
      }
    },
    created(){
      this.addSelect(this.tableData,false)
    }
  }