【实战】el-table树形表格可展开当前行子级+父子级选中联动

勇敢琳琳不怕困难

于 2024-09-04 10:00:33 发布

阅读量86

点赞数

文章标签：前端 javascript elementui

本文链接：https://blog.csdn.net/m0_61101059/article/details/141885508

版权

最近在做新需求，要求是el-table可展开行的树级表格，能选中，能点击每一行就展开下边的子级。在这个博主的父子级别选中基础上进行的修改：http://t.csdnimg.cn/pB2UV

直接上可用的代码：

<template>
  <div class="bodybox">
    <el-table class="treetable" ref="fixtable" border :data="tableData" row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" highlight-current-row @select="checkSelect" height="50vh"
              :expand-row-keys="expandRows" @expand-change="handleExpandChange">
      <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 {
        // 展开项数组
        expandRows: [],
        // 展开行key
        expandKey: null,
        deleteArr: [],
        tableData: [
          {
            id: "11",
            name: "北京市",
            children: [
              {
                id: "1101",
                name: "市辖区",
                pid: "11",
                children: [
                  {
                    id: "110101", name: "东城区", pid: "1101", children: [
                      {
                        id: "110101022",
                        name: "东城区子级",
                        pid: "11",
                        children: [
                          {
                            id: "11010108", name: "东城区11", pid: "1101", children: [

                            ]
                          },
                          { id: "11010201", name: "东城区22", 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: {
      handleExpandChange (row, expanded) {
        console.log(row, expanded)

        let expandKey = []
        if (expanded) {
          expandKey.push(row.id);
          this.expandRows = [...expandKey]
          this.handleArr(row.children)
        } else {
          expandKey = expandKey.filter(item => item !== row.id);
          this.expandRows = [...expandKey]
        }


      },
      handleArr (arr, flag) {
        arr.forEach(i => {
          // 只判断有子集的时候，展开行
          if (i.children && i.children.length > 0) {
            this.expandRows.push(i.id);
          }
          // this.$refs.tableName.toggleRowExpansion(i, flag);
          if (i.children) {
            this.handleArr(i.children);
          }
        });
        console.log(this.expandRows)
      },
      // 多选
      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="scss">
.treetable {
  thead {
    .el-checkbox__inner {
      display: none;
    }
  }
}
</style>