element-ui，使用el-table时，type=“expand“和fixed一起使用坑

比老马还六2026-04-21 10:27

今天在改bug，出现一个我都没见过的想象，请看图，如标题所示，在用el-table时，用到了type="expand"做展开行功能，然而外层用到了fixed，会导致表格显示错误，分析后，我认为时内嵌表格的宽度超过外层表格的宽度才会导致这样情况。

那么如何解决呢，我是通过让ai去思考的，给到的解决方案是，加一层
容器，对于样式，ai给出来是改动这么多，具体还是得看自己代码是如何写的，我的改动就简单，只对padding-right做了调整。

复制代码

<el-table :data="tableData" style="width: 100%">
  <el-table-column type="expand">
    <template slot-scope="props">
      <!-- 核心：加一层包裹 div，并限制最大宽度和溢出隐藏 -->
      <div class="expand-content-wrapper">
        <p>这里是非常长的文字内容，可能会被固定列遮挡...</p>
        <p>{{ props.row.description }}</p>
      </div>
    </template>
  </el-table-column>
  
  <el-table-column prop="name" label="姓名" fixed />
</el-table>

<style scoped>
.expand-content-wrapper {
	  /* 限制最大宽度，防止撑破表格 */
	  max-width: 100%; 
	  /* 隐藏超出部分 */
	  overflow: hidden; 
	  /* 可选：如果需要省略号效果 */
	  text-overflow: ellipsis; 
	  /* 加上 padding 防止内容贴边 */
	  padding: 10px 20px;
	  box-sizing: border-box;
}
</style>