帝国cms做网站宁德市公共资源交易中心

背景

当el-table的列太多时，得拖动横向滚动条才能看到，但如果内容也很多，可能横向滚动条还看不到，又得滑到最下方才能拖动滚动条，这样不太方便。

若内容过多时，有个固定在可视区域的横向滚动条就好了， el-table-horizontal-scroll 插件即可实现

1、安装插件

npm install el-table-horizontal-scroll

2、在 Vue 项目中注册该指令

• 对于 Vue 2，可以全局注册

import Vue from 'vue';
import horizontalScroll from 'el-table-horizontal-scroll';Vue.use(horizontalScroll);

•  对于 Vue 3，可以在 main.js 或 main.ts 中注册

import { createApp } from 'vue';
import App from './App.vue';
import horizontalScroll from 'el-table-horizontal-scroll';const app = createApp(App);
app.use(horizontalScroll);
app.mount('#app');

3、在 el-table 组件中使用 v-horizontal-scroll 指令

<el-table :data="data" v-horizontal-scroll="'always'"><!-- 表格列 --></el-table>

el-table-horizontal-scroll 支持两种滚动条显示方式：always 和 hover。默认情况下，滚动条在鼠标悬停在表格上时显示（hover）。如果希望滚动条始终显示，可以将其设置为 always