el-table 树类型的表格数据和右侧内容切换，点击父节点会折叠

element ui 里面有支持树类型的表格数据展示，

我想要实现的效果如图，所示：

既可以展示树形数据，有父节点和子节点，点击子节点后可以切换右侧内容，并展示子节点的详细数据，点击父节点，会折叠收起。整体效果是如编辑器里的文件夹一样。上图只是一个演示，凑合看啦。

目录

效果展示：

1.html

2.js

3.css 

---

效果展示：

真正实现的如下图所示，用的是Vue3里的element组件

1.html

这个部分有两个结构组成左侧的树形表格和右侧的表单

<template>
  <div class="record">
    <div class="record-tree">
      <el-table
        :data="treeData"
        border
        size="medium"
        default-expand-all
        highlight-current-row
        :props="defaultProps"
        :row-key="getRowKeys"// 重要
        style="width: 95%"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"  //树形结构
        @row-click="clickTable" 
        ref="treeTable"  //重要
      >
        <el-table-column prop="label" :label="title"></el-table-column>
      </el-table>
    </div>
    <div class="record-from">
      <formPage
        v-if="allTableCol.length > 0"
        :title="title2"
        :table-col="allTableCol"
        :table-data="allTableDate"
        :label="label"
        :table-id="tableId"
      />
    </div>
  </div>
</template>

2.js

首先就是数据，我模拟的数据如下：

 this.treeData = [
        { GROUP_VALUE: '肿瘤科 2022-10-15', children: [], id: 1, label: '肿瘤科 2022-10-15' },
        {
          GROUP_VALUE: '消化内科 2022-10-08',
          children: [
            {
              EXTERNAL_KEY: 'VISIT_ID',
              EXTERNAL_KEY_VALUE: 'VI26A0BE26F96C',
              EXTERNAL_TABLE: 'TMED_MR_CLINIC_VISIT_RECORD',
              RECORD_TITLE: '门诊记录单',
              id: 202,
              label: '门诊记录单 2022-10-08'
            }
          ],
          id: 2,
          label: '消化内科 2022-10-08'
        },
        { GROUP_VALUE: '泌尿科 2022-10-05', children: [], id: 3, label: '泌尿科 2022-10-05' },
        {
          GROUP_VALUE: '急诊内科 2022-10-05',
          children: [
            {
              EXTERNAL_KEY: 'VISIT_ID',
              EXTERNAL_KEY_VALUE: 'VID31B0DFA222C',
              EXTERNAL_TABLE: 'TMED_MR_CLINIC_VISIT_RECORD',
              RECORD_TITLE: '门诊记录单',
              id: 144,
              label: '门诊记录单 2022-10-08'
            }
          ],
          id: 4,
          label: '急诊内科 2022-10-08'
        }
      ]

获取数据之后，点击左侧的树形结构的表格时有个点击事件，如下：

    //id    
    getRowKeys(row) {
      return row.id
    },
    // 点击行展开事件
    clickTable(row, index, e) {
      //如果是父节点，则展开或者收起
      if (row.GROUP_VALUE) {
        this.$refs.treeTable.toggleRowExpansion(row)
      } else {
       //子节点，则展开并展示子节点的内容
        this.getOpenDetail(row)
      }
    },
    // 点击展开节点
    getOpenDetail(ele) {
      this.label = ele.label
      if (ele.RECORD_TITLE) {
        this.title2 = ele.RECORD_TITLE
      }
      let data = {
        tableColumnId: ele.EXTERNAL_KEY_VALUE,
        cascadeTableId: ele.EXTERNAL_TABLE,
        cascadeTableColumn: ele.EXTERNAL_KEY,
        researchPatientId: this.personID,
        masterTableId: this.tableId
      }
      //获取子节点的数据
      
      this.getReportData(data)
    }

 子节点的数据，需要请求接口获取，或者也可以在treeData里面取。

async getReportData(data) {
      this.allTableDate = []
      this.allTableCol = []
      data.token = this.$route.query.token
      let res = (await getLDtdata(data)).data
      this.allTableDate = res.data.tableData
      this.allTableCol = res.data.tableCol.map((item) => {
        return {
          title: item.colName,
          colId: item.colId,
          fixed: 'center',
          id: item._id,
          displayType: item.colDisplayType,
          isShow: item.colDefaultDisplay === 'Y',
          search: item.colSearch === 'Y',
          sort: item.colSort === 'Y'
        }
      })
}

3.css 

如果要实现，图上那种效果，可以参考以下样式：

<style lang="scss" scoped>
.record {
  width: 100%;
  height: 100%;
  .record-tree {
    width: 28%;
    height: calc(100vh - 150px);
    float: left;
    overflow: auto;
    .el-table__body tr.current-row > td.el-table__cell {
      background-color: #409eff;
    }
  }
  .record-from {
    width: 72%;
    height: 100%;
    float: left;
  }
}
</style>

<style lang="scss">
//css 样式重置 增加个前缀避免全局污染
.record {
  .current-row > td.el-table__cell {
    color: $main-color !important;
    background: $main-two-color !important;
    border-right: 4px solid $main-color;
  }
  .current-row {
    color: $main-color !important;
    background: $main-two-color !important;
  }
  .el-table thead {
    font-size: 16px !important;
  }
  .el-tree-node__label {
    font-size: 16px;
    line-height: 30px;
    height: 30px;
  }
  .el-tree-node__content {
    height: 30px;
  }
  .is-current {
    color: #409eff;
  }
  .el-table__row--level-1 {
    cursor: pointer;
  }
}
</style>

 以上是树形结构表格导航和切换功能。