背景

當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