el-table添加横向滚动条

效果如下

 

安装

npm install el-table-horizontal-scroll

在 main.js 文件注册：

import horizontalScroll from 'el-table-horizontal-scroll'

# vue2
Vue.use(horizontalScroll)

# vue3
app.use(horizontalScroll)

或者

import horizontalScroll from 'el-table-horizontal-scroll'

export default {
    directives: {
        horizontalScroll
    }
}

使用

ps: 你可以使用always或hover

      默认是悬停，当鼠标悬停在桌面上时，该工具条会显示出来

      或者你可以将它改为always，并使栏始终显示

<el-table
  :data="data"
  v-horizontal-scroll="'always'"
>

手动向该类添加样式，如果你觉得悬停时滚轮太小，您可以将此添加到样式中

.el-table-horizontal-scrollbar:hover {
  transform: scaleY(1.5);
  filter: brightness(0.1);
  transform: scaleY(1.75) translateY(-10%);
}

源码仓库地址

GitHub - mizuka-wu/el-table-horizontal-scroll: el-table awlays show horizontal-scroller on bottomhttps://github.com/mizuka-wu/el-table-horizontal-scroll