Vue+elementui表格中的数据是树形结构实现全选

因为树形结构的数据类型是嵌套的，elementui表格的全选没有办法实现选择子类

那么我们要通过循环遍历来让子类也选中

首先添加单选和全选事件，还有通过ref找到表格

<el-table
            ref="refTable"
            v-loading="loading"
            :data="dataList"
            style="width: 100%"
            row-key="id"
            default-expand-all
            border
            :header-cell-style="{ height: '30px !important', fontSize: '14px' }"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            select-on-indeterminate
            :height="screenHeight"
            @select="rowSelect"
            @select-all="selectAll"
          >

data中定义一个储存选中数据的数组

// 多选数据暂存数组
      multipleSelection: []

事件

//树状表格全选
    /*注意在获取初始数据时，所有节点（包括子节点）都增加一个isChecked 标志参数*/
    rowSelect(selection, row) {
      if (row.children) {
        //只对有子节点的行响应
        if (!row.isChecked) {
          //由行数据中的元素isChecked判断当前是否被选中
          row.children.map(item => {
            //遍历所有子节点
            this.$refs.refTable.toggleRowSelection(item, true); //切换该子节点选中状态
            /*
                方法名                    说明                                      参数
                                     用于多选表格，切换某一行的选中状态，         row, selected
                toggleRowSelection   如果使用了第二个参数，则是设置这一行
                                     选中与否（selected 为 true 则选中）
                 */
            item.isChecked = true;
            //添加选中数据
            this.multipleSelection.push({ id: item.id });
          });
          this.multipleSelection.push({ id: row.id });
          row.isChecked = true; //当前行isChecked标志元素切换为false
        } else {
          row.children.map(item => {
            this.$refs.refTable.toggleRowSelection(item, false);
            item.isChecked = false;
            this.multipleSelection.splice(this.multipleSelection.indexOf(item), 1);
          });
          row.isChecked = false;
          this.multipleSelection.splice(this.multipleSelection.indexOf(row), 1);
        }
        // console.log(this.multipleSelection, row);
      }
    },
    selectAll(selection) {
      // selection 是选中的数据集合
      this.$refs.refTable.data.map(items => {
        //使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
        if (items.children) {
          if (!items.isChecked) {
            //若遍历出来的行未选中
            this.$refs.refTable.toggleRowSelection(items, true); //行变为选中状态
            items.isChecked = true; //更新标志参数
            this.multipleSelection.push({ id: items.id });
            items.children.map(item => {
              //遍历子节点并改变状态与标志参数
              this.$refs.refTable.toggleRowSelection(item, true);
              item.isChecked = true;
              this.multipleSelection.push({ id: item.id });
            });
          } else {
            //选中状态同理
            this.$refs.refTable.toggleRowSelection(items, false);
            items.isChecked = false;
            this.multipleSelection.splice(this.multipleSelection.indexOf(items), 1);
            items.children.map(item => {
              this.$refs.refTable.toggleRowSelection(item, false);
              item.isChecked = false;
              this.multipleSelection.splice(this.multipleSelection.indexOf(item), 1);
            });
          }
        } else {
          if (!items.isChecked) {
            items.isChecked = true;
            this.multipleSelection.push({ id: items.id });
          }
          else items.isChecked = false;
          this.multipleSelection.splice(this.multipleSelection.indexOf(items), 1);
        }
      });
      // console.log(this.orgs)
    }

通过以上事件就可以实现数据是树形结构的全选