亲测有效
使用v-horizontal-scroll
网上一个大佬写的,是真的厉害
源码仓库地址
GitHub - mizuka-wu/el-table-horizontal-scroll: el-table awlays show horizontal-scroller on bottom
1 安装 npm install el-table-horizontal-scroll
2 注册组件
import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)
3 在el-table上添加v-horizontal-scroll
可以使用 always
或 hover`` ,
默认值为hover
,将鼠标悬停在表格上时,该栏将显示;
或者可以将其更改为always,
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" v-horizontal-scroll="'always'">
</el-table>
这个组件默认的样式个人觉得不太仔细看不见
.el-scrollbar__thumb{
background-color: #17b3a3 !important;
}
.el-scrollbar__bar.is-horizontal{
height: 0.1rem !important;
}
样式全局更改