关于element-ui的table type=“expand“ 嵌套表格展开异常问题解决方案

笔直向前冲

于 2025-05-20 17:16:55 发布

阅读量369

点赞数 2

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/meisnb/article/details/148092591

版权

也许是很久没用这个库了今天找这个问题还花了一会儿时间也是蛮简单的一个问题排查过程就不说了直接说结果吧记录一下

发现问题展开第一列的时候表格没问题收起的时候莫名其妙多了一个展开的按钮

代码咋一看没什么问题百思不解不得其解甚至怀疑row-key的问题检查了数据 expand-change也检查了逻辑没什么问题

    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      row-key="sectorCode"
      border
      :height="tableHeight"
      show-summary
      :summary-method="getSummaries"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand">
        <template #default="props">
          <el-table
            :data="props.row.children"
            style="width: 100%"
            size="small"
            border
            :show-header="false"
          >
            <!-- 二级表格占位空白列，宽度和一级展开列一致 -->
            <el-table-column width="48px" />
            <!-- 二级表格序号列 -->
            <el-table-column width="50" />
            <el-table-column prop="sector" label="板块">
              <template slot-scope="scope">
                <el-link type="primary" @click="checkDetails(scope.row)">{{
                  scope.row.sector
                }}</el-link>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- 一级表格序号列，放在展开列后面 -->
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="sector" label="板块">
        <template slot-scope="scope">
          <el-link type="primary" @click="checkDetails(scope.row)">{{
            scope.row.sector
          }}</el-link>
        </template>
      </el-table-column>
    </el-table>

后来感觉像是占用到树形表格的关键字的问题于是把嵌套表格中的 :data="props.row.children" 属性改为 :data="props.row.ItemTableData" 问题解决 shit!!!