el-table 如果设置滚动条的宽度和高度 导致<el-table-column fixed="right"底部多了一个滚动条高度的空白

这个问题通常发生在设置了固定列（fixed）和滚动条时。原因是固定列会创建一个新的div来包裹固定的列，而滚动条是添加在外层的div上的。因此，外层的div会比内层的div高出滚动条的高度，导致底部多出一块空白。

解决方法是在外层的div上设置一个负的margin-bottom，值为滚动条的高度。例如：

.el-table__body-wrapper {
  margin-bottom: -17px; /* 如果滚动条高度为17px */
}

这样就可以消除底部的空白了。

相关问题

el-table-column fixed 后滚动条不能使用

如果使用 el-table-column 的 fixed 属性，滚动条会被 el-table 的外部容器覆盖，导致无法使用。解决方法是给 el-table 组件添加一个样式 `overflow: auto` 来显示滚动条，示例代码如下：

<el-table :data="tableData" style="width: 100%; overflow: auto;">
  <el-table-column prop="name" label="Name" fixed></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column prop="address" label="Address"></el-table-column>
</el-table>

另外，如果你在使用 fixed 属性后还想要表格自适应页面宽度，可以给 el-table 组件添加 `max-height` 和 `min-width` 样式，示例代码如下：

<el-table :data="tableData" style="width: 100%; overflow: auto; max-height: 500px; min-width: 600px;">
  <el-table-column prop="name" label="Name" fixed></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column prop="address" label="Address"></el-table-column>
</el-table>

这样就可以使用 fixed 属性并且正常显示滚动条了。

el-table fixed 后滚动条不能使用

如果您使用 Element UI 的 `el-table` 组件，并且在表格中设置了 `fixed` 属性，导致滚动条不能使用，可以尝试以下方法：

1. 确保您的表格外层容器设置了固定高度或者最大高度，例如：

<div style="height: 400px;">
  <el-table :data="tableData" height="100%" fixed>
    <!-- 表格列 -->
  </el-table>
</div>

2. 如果您的表格列设置了固定宽度，需要将固定宽度的列和非固定宽度的列分别放在两个 `<el-table-column>` 中，例如：

<el-table :data="tableData" height="100%" fixed>
  <el-table-column label="姓名" width="150">
    <template slot-scope="{ row }">{{ row.name }}</template>
  </el-table-column>
  <el-table-column label="地址" prop="address"></el-table-column>
  <el-table-column label="邮编" width="120">
    <template slot-scope="{ row }">{{ row.zip }}</template>
  </el-table-column>
  <el-table-column label="电话" prop="phone"></el-table-column>
</el-table>

3. 如果上述方法都无法解决问题，您可以尝试使用 `max-height` 属性代替 `height` 属性，或者使用第三方库来替代 `el-table` 组件。