el-table-horizontal-scroll

> let el-table show horizontal scroll-bar at bottom

support vue2 and vue3

中文文档

How to use


$3

``
npm install el-table-horizontal-scroll
`

$3

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

vue2

Vue.use(horizontalScroll)

vue3

app.use(horizontalScroll)
`

or

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

export default {
directives: {
horizontalScroll
}
}
`

$3

`
:data="data"
v-horizontal-scroll
>
fixed="left"
label="a"
prop="a"
>
label="b"
prop="b"
>
label="c"
prop="c"
>
label="d"
prop="d"
width="1600"
>

`

props

you can use always or hover

default is hover, the bar will show when your mouse over the table

or you can change it to always, and make the bar always show

example

`
:data="data"
v-horizontal-scroll="'always'"
>
fixed="left"
label="a"
prop="a"
>
label="b"
prop="b"
>
label="c"
prop="c"
>
label="d"
prop="d"
width="1600"
>

`

How to change scrollbar‘s height

.el-table-horizontal-scrollbarl

manual add style to this class

if you think the scroller is so small when hover,
you can add this to the style

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