el-table-column fixed 后滚动条不能使用
时间: 2023-08-03 08:03:29 浏览: 606
如果使用 el-table-column 的 fixed 属性,滚动条会被 el-table 的外部容器覆盖,导致无法使用。解决方法是给 el-table 组件添加一个样式 `overflow: auto` 来显示滚动条,示例代码如下:
```html
<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` 样式,示例代码如下:
```html
<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 属性并且正常显示滚动条了。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)