将 el-table 中的滚动条置与fixed 的上层或者最上层 给出代码示例
时间: 2024-02-09 13:13:19 浏览: 68
你可以通过 `z-index` 属性来设置元素的层级,将滚动条设置为最上层。以下是一个示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%; height: 300px;">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
<style>
.el-table__body-wrapper {
overflow-y: scroll;
position: relative;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #f2f2f2;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.2);
}
.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #f2f2f2;
}
.el-table__fixed::-webkit-scrollbar {
z-index: 999;
}
</style>
```
在上面的代码中,我们设置了 `.el-table__body-wrapper` 元素的 `position` 为 `relative`,并在其中添加了滚动条样式。然后,我们将 `.el-table__fixed` 元素的滚动条层级设置为最上层,通过 `z-index` 属性来实现。
注意:这只适用于使用 Element UI 的 el-table 组件。如果你想要在其他场景下实现类似的效果,你需要根据实际情况来进行调整。
阅读全文