el-table 固定列设置高度造成左后一个单元格露出表格内容问题。

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

el-table 固定列设置高度造成左后一个单元格露出表格内容问题

问题描述：当 el-table 表格固定列高度不满，设置高度后，滚动时会露出表格内容，尝试背景设置为白色，同样会被挡住一半。

解决办法：

1. 设置 el-table 的 height 属性为一个固定的值，例如 height: 300，这样可以确保表格的高度不变。
2. 使用 el-table-column 的 fixed 属性设置固定列的高度，例如 fixed: 'left' 或 fixed: 'right'，这样可以确保固定列的高度不变。
3. 使用 el-table 的 stripe 属性设置表格的 stripe 行，例如 stripe: true，这样可以使表格的行显示为 stripe 行，避免露出表格内容。
4. 使用 el-table-column 的 width 属性设置固定列的宽度，例如 width: 100，这样可以确保固定列的宽度不变。

示例代码：

<el-table :data="tableData" style="width: 100%">
  <el-table-column type="index" width="50" fixed="left"></el-table-column>
  <el-table-column prop="name" label="Name" width="150"></el-table-column>
  <el-table-column prop="age" label="Age" width="100"></el-table-column>
  <el-table-column prop="address" label="Address" width="200"></el-table-column>
</el-table>

代码解释

• el-table 的 style 属性设置表格的宽度为 100%。
• el-table-column 的 type 属性设置索引列的类型为索引。
• el-table-column 的 width 属性设置固定列的宽度为 50px。
• el-table-column 的 fixed 属性设置固定列的固定方式为左侧。

通过上述解决方案，可以解决 el-table 固定列设置高度造成左后一个单元格露出表格内容问题。