element table选父带子，选子带父

Posted 2021-12-30 包子源

<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.isPush = row.isPush ? 0 : 1;
      if (row.children) 
        this.checkFun(row.children, row.isPush);
      
      if (row.isPush) 
        this.CheckParentFun(this.tableData, row.pid);
       else 
        this.clearParentFun(this.tableData, row.pid);
      
      this.fileTreeArr = [];
      this.getId(this.tableData);
    ,
    // 子节点全部取消父节点清空
    clearParentFun(table, pid) 
      table.forEach((element) => 
        if (pid == element.id) 
          let issel = false;
          element.children.forEach((elementb) => 
            if (elementb.isPush == true) 
              issel = true;
            
          );
          element.isPush = issel ? 1 : 0;
          if (!issel) 
            this.$refs.fixtable.toggleRowSelection(element, false);
          
          if (element.pid) 
            this.clearParentFun(this.tableData, element.pid);
          
         else 
          if (element.children) 
            this.clearParentFun(element.children, pid);
          
        
      );
    ,
    // 递归选中
    checkFun(data, status) 
      data.forEach((element) => 
        element.isPush = status;
        this.$refs.fixtable.toggleRowSelection(
          element,
          element.isPush ? true : false
        );
        if (element.children) 
          this.checkFun(element.children, element.isPush);
        
      );
    ,
    // 父节点选中
    CheckParentFun(table, pid) 
      table.forEach((element) => 
        if (pid == element.id) 
          element.isPush = 1;
          this.$refs.fixtable.toggleRowSelection(element, true);
          if (element.pid) 
            this.CheckParentFun(this.tableData, element.pid);
          
         else 
          if (element.children) 
            this.CheckParentFun(element.children, pid);
          
        
      );
    ,
    // 获取选中ID
    getId(data) 
      data.forEach((element) => 
        if (element.isPush) 
          this.fileTreeArr.push(element);
        
        if (element.children) 
          this.getId(element.children);
        
      );
    ,
  ,
;
</script>
<style lang="less">
.treetable 
  thead 
    .el-checkbox__inner 
      display: none;
    
  

</style>

效果