#vue3# el-table-horizontal-scroll 让 el-table 在底部显示横向滚动条

最新推荐文章于 2025-04-22 18:44:49 发布

Miraitowa_chole

最新推荐文章于 2025-04-22 18:44:49 发布

阅读量2.9k

点赞数 12

文章标签： vue.js elementui javascript 前端 css json css3

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/134954833

版权

本文介绍了如何在El-Table宽度超出屏幕时，通过安装并注册`el-table-horizontal-scroll`插件，实现在可视区域底部自动添加横向滚动条，提高用户操作便捷性。同时，还展示了如何调整滚动条样式和配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求:

当 el-table 的宽度超出浏览器宽度时，尽管 el_table 底部会出现滚动条，但使用起来不太便捷，因为每次需要先滚动到底部才能使用 el-table 的滚动体，这显得相当繁琐。

为了提升体验，希望在 el-table 的宽度超出屏幕宽度时，即使没有滚动到底部，也能够在可视范围底部添加一个横向（左右）的滚动条，能够更方便地使用 el-table。

（即系不需要拉到底部才可以显示滚动条）

二、安装：

npm install el-table-horizontal-scroll

三、注册指令：

在main.ts（全局注册）

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

// Vue3
app.use(horizontalScroll)

四、在页面使用：

v-horizontal-scroll

<el-table
  :data="data"
  v-horizontal-scroll
>
  <el-table-column
    fixed="left"
    label="a"
    prop="a"
  ></el-table-column>
  <el-table-column
    label="b"
    prop="b"
  ></el-table-column>
  <el-table-column
    label="c"
    prop="c"
  ></el-table-column>
  <el-table-column
    label="d"
    prop="d"
    width="1600"
  ></el-table-column>
</el-table>

属性：

你可以使用 always 或 hover，默认是 hover，

当鼠标悬停在表格上时，滚动条会显示，

或者你可以将其更改为 always，使滚动条始终显示

示例：

<el-table
  :data="data"
  v-horizontal-scroll="'always'"
>
  <el-table-column
    fixed="left"
    label="a"
    prop="a"
  ></el-table-column>
  <el-table-column
    label="b"
    prop="b"
  ></el-table-column>
  <el-table-column
    label="c"
    prop="c"
  ></el-table-column>
</el-table>

五、在当前页面修改滚动条的css样式

使用深度穿透进行修改

（::v-deep 时，确保你的选择器放在括号内）

//滚动条 滑动时的背景颜色
::v-deep(.el-scrollbar__thumb) {
	background-color:#B2C403;
}
//鼠标悬停滚动条的大小
::v-deep(.el-table-horizontal-scrollbar:hover) {
  transform: scaleY(1.5) translateY(-10%);
  filter: brightness(0.1);
}