https://github.com/mizuka-wu/el-table-horizontal-scroll
el-table awlays show horizontal-scroller on bottom
https://github.com/mizuka-wu/el-table-horizontal-scroll
el-table element-ui horizontal scrollbar vuejs2
Last synced: 10 months ago
JSON representation
el-table awlays show horizontal-scroller on bottom
- Host: GitHub
- URL: https://github.com/mizuka-wu/el-table-horizontal-scroll
- Owner: mizuka-wu
- License: mit
- Created: 2022-02-09T00:19:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-12T13:31:21.000Z (about 2 years ago)
- Last Synced: 2024-12-06T14:31:25.101Z (over 1 year ago)
- Topics: el-table, element-ui, horizontal, scrollbar, vuejs2
- Language: JavaScript
- Homepage: https://www.mizuka.top/el-table-horizontal-scroll/index.html
- Size: 2.33 MB
- Stars: 71
- Watchers: 2
- Forks: 8
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# el-table-horizontal-scroll
> let el-table show horizontal scroll-bar at bottom
support vue2 and vue3
[中文文档]('./README_CN.md')
## How to use
### install
```
npm install el-table-horizontal-scroll
```
### register directive
```
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
}
}
```
### use
```
```
## props
you can use `always` or `hover` or `hidden`
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
```
```
## 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%);
}
```