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

Posted 2022-12-04 包子源

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>

效果