element树状表格checkbox选父带子，取消子取消父

Posted 2021-10-20 包子源

element树状表格checkbox选父带子，取消子取消父

代码：

<template>
  <div class="bodybox">
    <el-table
      class="treetable"
      ref="fixtable"
      border
      :data="tableData"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      highlight-current-row
      @select="checkSelect"
      height="100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="名称"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="id"
        label="编码"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Manage",
  components: {},
  data() {
    return {
      deleteArr: [],
      tableData: [
        {
          id: "11",
          name: "北京市",
          children: [
            {
              id: "1101",
              name: "市辖区",
              pid: "11",
              children: [
                { id: "110101", name: "东城区", pid: "1101", children: [] },
                { id: "110102", name: "西城区", pid: "1101", children: [] }
              ]
            }
          ]
        },
        {
          id: "12",
          name: "天津市",
          children: [
            {
              id: "1201",
              name: "市辖区",
              pid: "12",
              children: [
                { id: "120101", name: "和平区", pid: "1201", children: [] },
                { id: "120102", name: "河东区", pid: "1201", children: [] }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    // 多选
    checkSelect(data, row) {
      row.isCheck = row.isCheck ? false : true;
      this.checkFun(row.children, row.isCheck);
      if (!row.isCheck) {
        this.clearCheckFun(this.tableData, row.pid);
      }
      this.deleteArr = [];
      this.getId(this.tableData);
      console.log(this.deleteArr);
    },
    // 递归选中
    checkFun(data, status) {
      data.forEach(element => {
        element.isCheck = status;
        this.$refs.fixtable.toggleRowSelection(element, element.isCheck);
        if (element.children) {
          this.checkFun(element.children, element.isCheck);
        }
      });
    },
    // 清除父节点选中
    clearCheckFun(table, pid) {
      table.forEach(element => {
        if (pid == element.id) {
          element.isCheck = false;
          this.$refs.fixtable.toggleRowSelection(element, false);
          if (element.pid) {
            this.clearCheckFun(this.tableData, element.pid);
          }
        } else {
          if (element.children) {
            this.clearCheckFun(element.children, pid);
          }
        }
      });
    },
    // 获取选中ID
    getId(data) {
      data.forEach(element => {
        if (element.isCheck) {
          this.deleteArr.push(element.id);
        }
        if (element.children) {
          this.getId(element.children);
        }
      });
    }
  }
};
</script>
<style lang="less">
.treetable {
  thead {
    .el-checkbox__inner {
      display: none;
    }
  }
}
</style>

效果