elementUI表格里树形结构嵌套复选框全选全不选功能

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="实验室：" prop="names">
        <el-input
          type="text"
          placeholder="请输入"
          v-model="queryParams.names"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row>
      <el-col>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
        <el-button
          type="success"
          plain
          icon="el-icon-thumb"
          size="mini"
          @click="cerateQrCode"
          >生成二维码</el-button
        >
        <el-button
          type="info"
          plain
          icon="el-icon-sort"
          size="mini"
          @click="toggleExpandAll"
          >展开/折叠</el-button
        >
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        v-if="refreshTable"
        :default-expand-all="isExpandAll"
        ref="table"
        :data="tableData"
        row-key="id"
        :indent="50"
        :select-on-indeterminate="false"
        @select="select"
        @select-all="selectAll"
        @selection-change="selectionChange"
        :tree-props="{ children: 'childList' }"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="name" label="学院" align="center" width="200" />
        
        <el-table-column label="二维码" prop="reasons" align="center">
          <template slot-scope="">
            <el-image
              style="width: 50px; height: 50px"
              src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQFV8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyX3NHSGh3RnFjYkgxMDAwMHcwN1MAAgTwduRkAwQAAAAA"
              fit="fill"
              :preview-src-list="[
                'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQFV8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyX3NHSGh3RnFjYkgxMDAwMHcwN1MAAgTwduRkAwQAAAAA',
              ]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="reasons" align="center">
          <template slot-scope="">
            <el-button type="text" icon="el-icon-edit">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 实验室负责人弹框 -->
    <el-dialog
      title="实验室负责人"
      :visible.sync="popledialogVisible"
      width="20%"
      :before-close="handleClose"
    >
      <div></div>
      <p>学校：张三</p>
      <p>化工学院：李四</p>
      <p>生物实验室：王五</p>
      <p>123室：小李</p>
    </el-dialog>
  </div>
</template>

<script>
import { listDept } from "@/api/system/dept";
export default {
  data() {
    return {
      showSearch: true,
      loading: false,
      // 表格树数据
      tableData: [
        {
          id: 1,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          childList: [
            {
              id: 31,
              date: "2016-05-31",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-32",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              childList: [
                {
                  id: 39,
                  date: "2016-05-31",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                  id: 40,
                  date: "2016-05-32",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1519 弄",
                  childList: [
                    {
                      id: 55,
                      date: "2016-05-31",
                      name: "王小虎",
                      address: "上海市普陀区金沙江路 1519 弄",
                    },
                    {
                      id: 56,
                      date: "2016-05-32",
                      name: "王小虎",
                      address: "上海市普陀区金沙江路 1519 弄",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],

      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        names: "",
      },
      popledialogVisible: false,
      multipleSelection: [],
      selectArr: [],
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      listDept(this.queryParams).then((response) => {
        this.deptList = this.handleTree(response.data, "deptId");
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 实验室负责人弹框
    poples() {
      this.popledialogVisible = true;
    },
   
    select(selection, row) {
      if (
        selection.some((el) => {
          return row.id === el.id;
        })
      ) {
        if (row.childList) {
          this.toggleChildSelection(row.childList, true);
        }
      } else {
        if (row.childList) {
          this.toggleChildSelection(row.childList, false);
        }
      }
    },
    selectAll(selection) {
      const isSelect = selection.some((el) => {
        const tableDataIds = this.tableData.map((j) => j.id);
        return tableDataIds.includes(el.id);
      });
      const isCancel = !this.tableData.every((el) => {
        const selectIds = selection.map((j) => j.id);
        return selectIds.includes(el.id);
      });
      if (isSelect) {
        this.tableData.forEach((el) => {
          if (el.childList) {
            this.toggleChildSelection(el.childList, true);
          }
        });
      }
      if (isCancel) {
        this.tableData.forEach((el) => {
          if (el.childList) {
            this.toggleChildSelection(el.childList, false);
          }
        });
      }
    },
    toggleChildSelection(childList, select) {
      childList.forEach((child) => {
        this.$refs.table.toggleRowSelection(child, select);
        if (child.childList) {
          this.toggleChildSelection(child.childList, select);
        }
      });
    },
    selectionChange(selection) {
      this.selectArr = selection;
    },
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.table && this.$refs.table.toggleRowSelection(row, select);
        });
      }
    },
    cancelAll() {
      this.$refs.table.clearSelection();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>