一、需求:
當(dāng) el-table 的寬度超出瀏覽器寬度時(shí)，盡管 el_table 底部會(huì)出現(xiàn)滾動(dòng)條，但使用起來不太便捷，因?yàn)槊看涡枰葷L動(dòng)到底部才能使用 el-table 的滾動(dòng)體，這顯得相當(dāng)繁瑣。
為了提升體驗(yàn)，希望在 el-table 的寬度超出屏幕寬度時(shí)，即使沒有滾動(dòng)到底部，也能夠在可視范圍底部添加一個(gè)橫向（左右）的滾動(dòng)條，能夠更方便地使用 el-table。
（即系不需要拉到底部才可以顯示滾動(dòng)條）
二、安裝：
npm install el-table-horizontal-scroll
三、注冊(cè)指令：
在main.ts（全局注冊(cè)）
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，默認(rèn)是 hover，
當(dāng)鼠標(biāo)懸停在表格上時(shí)，滾動(dòng)條會(huì)顯示，
或者你可以將其更改為 always，使?jié)L動(dòng)條始終顯示
示例：
<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>
五、在當(dāng)前頁面修改滾動(dòng)條的css樣式
使用深度穿透進(jìn)行修改文章來源：http://www.zghlxwxcb.cn/news/detail-800466.html
（::v-deep 時(shí)，確保你的選擇器放在括號(hào)內(nèi)）文章來源地址http://www.zghlxwxcb.cn/news/detail-800466.html
//滾動(dòng)條 滑動(dòng)時(shí)的背景顏色
::v-deep(.el-scrollbar__thumb) {
background-color:#B2C403;
}
//鼠標(biāo)懸停滾動(dòng)條的大小
::v-deep(.el-table-horizontal-scrollbar:hover) {
transform: scaleY(1.5) translateY(-10%);
filter: brightness(0.1);
}
到了這里，關(guān)于#vue3# el-table-horizontal-scroll 讓 el-table 在底部顯示橫向滾動(dòng)條的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
