el-table 树形数据和展开行 结合使用

​

需求

问题

element ui 里是有树形结构数据的

也有     展开行    的

但是，，这俩不能同时使用，

展开行要用到   

 type="expand"

一用这个，左侧的树形结构就被覆盖掉了，没法同时使用。

实现

我是换个思路，纯用js手写展开行，在每行的下面加了tr用来展示数据的。

以下代码我只粘贴了重要部分的， 其他无关的我就不附上了。

<template>
  <div class="app-container">
        <el-card class="box-card" style="margin-top: 20px">
          <el-table
            ref="tableRef"
            v-loading="loading"
            :data="userList"
            :row-key="(row) => row.uuid"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column
              label="库表名称"
              align="left"
              prop="kbmc"
              :show-overflow-tooltip="true"
            />

            <el-table-column
              label="总数"
              align="left"
              prop="zs"
              :show-overflow-tooltip="true"
            />

            <el-table-column
              label="合格数"
              align="left"
              prop="hgs"
              :show-overflow-tooltip="true"
            />

            <el-table-column label="不合格数" align="left" prop="bhgs">
              <template #default="scope">
                <span
                  @click="toggleRow(scope.row, $event)"
                  style="color: #f59a23; cursor: pointer; user-select: none"
                  >{{ scope.row.bhgs }}</span
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 动态渲染子表格 -->
          <template v-if="currentRow">
            <teleport :to="`tr.gas-add-tr .expand-content`">
              <div style="padding: 10px 30px; background: #f9f9f9">
                <el-table :data="currentRow.children" border>
                  <el-table-column label="name" prop="name"></el-table-column>
                  <el-table-column label="age" prop="state"></el-table-column>
                  <el-table-column label="address" prop="zip"></el-table-column>
                </el-table>
              </div>
            </teleport>
          </template>
        </el-card>
  </div>
</template>
<script setup>
const userList = ref([
  {
    kbmc: '小名',
    zs: 111111,
    hgs: 22222,
    bhgs: 33,
    uuid: 9,
    children: [
      {
        kbmc: '结构表1',
        zs: 123,
        hgs: 423,
        bhgs: 464,
        uuid: 65479,
      },
      {
        kbmc: '结构表2',
        zs: 124,
        hgs: 5325,
        bhgs: 745,
        uuid: 568,
      },
    ],
    // hasChildren: true,
  },
  {
    kbmc: '大名2',
    zs: 1111112,
    hgs: 222222,
    bhgs: 332,
    uuid: 92,
    children: [
      {
        kbmc: '结构表3',
        zs: 124,
        hgs: 5325,
        bhgs: 745,
        uuid: 5628,
      },
    ],
    // hasChildren: false,
  },
]);
const loading = ref(false);
const currentRow = ref(null);

const toggleRow = (row, event) => {
  const uuid = row.uuid;
  const rowElement = event.target.closest('tr');
  if (rowElement && rowElement.closest('table')) {
    const rowsToRemove = rowElement
      .closest('table')
      .querySelectorAll('tr.gas-add-tr');
    rowsToRemove.forEach((row) => row.remove());
  }

  if (currentRow.value && currentRow.value.uuid == uuid) {
    // 如果已经存在，关闭它
    currentRow.value = null;
  } else {
    currentRow.value = null;

    nextTick(() => {
      currentRow.value = row;
      const newRow = document.createElement('tr');
      newRow.classList.add('gas-add-tr');

      const newRowContent = document.createElement('td');
      newRowContent.colSpan = '12';
      newRowContent.innerHTML = `
        <div class="expand-content">
          <!-- 子表格渲染区域 -->
        </div>
      `;
      newRow.appendChild(newRowContent);

      rowElement.parentNode.insertBefore(newRow, rowElement.nextSibling);
    });
  }
};

改进

样式上，我没怎么调整。以及里面我用的table表格，你也可以换成别的，另外，因为是通过方法点击的，你也可以加上接口调用，展示接口的数据也是没问题的。

​