elementui中不用el-table框自带的滚动条用浏览器自己的滚动条

在 Element UI 的 el-table 中，可以通过设置 table 的 height 属性为一个固定的值或者一个百分比来控制表格的高度。当表格的内容超出了可见区域时，el-table 会自动出现纵向滚动条，这个滚动条是由浏览器自己生成的。

如果你想要使用浏览器自带的滚动条，可以将 table 的 height 设置为 auto，然后将 el-table-column 的 width 属性设置为一个固定的值，这样表格就会根据列宽度自适应高度，从而使用浏览器自带的滚动条。

示例代码如下：

<el-table :data="tableData" height="auto" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  <el-table-column prop="address" label="地址" width="200"></el-table-column>
</el-table>

这样配置后，el-table 会根据列宽度自适应高度，当表格内容超出可见区域时，会出现浏览器自带的纵向滚动条。

相关问题

el-table滚动隐藏滚动条

在使用Element UI的`el-table`组件时，如果你希望表格在水平滚动时隐藏滚动条，可以通过一些CSS样式来实现。以下是一个基本的方法：

首先，你需要给`el-table`添加一个自定义类名，以便能够定位到表格的滚动容器并应用样式。例如，可以给`el-table`添加一个类名为`custom-table`的类。

<el-table class="custom-table" ...>
  <!-- 表格内容 -->
</el-table>

然后，在你的CSS文件中添加以下样式规则：

.custom-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 0 !important; /* 针对Chrome、Safari和Opera隐藏滚动条 */
}

.custom-table .el-table__body-wrapper {
  -ms-overflow-style: none; /* 针对IE和Edge隐藏滚动条 */
  scrollbar-width: none; /* 针对Firefox隐藏滚动条 */
}

这段CSS做了以下几件事情：

1. 为`.el-table__body-wrapper`元素添加了一个伪元素`::-webkit-scrollbar`，并将其宽度设置为0，从而隐藏了滚动条。这适用于Chrome、Safari和Opera浏览器。
2. 使用`-ms-overflow-style: none;`属性来隐藏滚动条，这个属性主要影响的是IE和Edge浏览器。
3. 使用`scrollbar-width: none;`来隐藏滚动条，这适用于Firefox浏览器。

需要注意的是，通过CSS隐藏滚动条后，用户将无法通过滚动条来控制滚动，但你可以通过其他方式（例如监听滚动事件并设置滚动位置）来模拟滚动条的功能，以保持表格的可交互性。

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

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

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

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

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