el-table-bar-base

> 自定义element-ui 表格滚动条组件 by Jdes on 2019-02-18

> 由于 npm 的 OTP 验证问题,原来的 el-table-bar 迁移至 el-table-bar-base 请使用者删除原始包后下载 el-table-bar-base 原有功能不变

update Log

$3

- 示例更新，文档说明更新

$3

- 修复表格宽度足够的情况下仍然会出现横向滚动条的 bug

$3

- 提供纵向滚动功能，开启此功能传入height属性即可。具体见 API 列表

$3

- 修复 IE11 无法使用的 bug

$3

- 新增native属性，在设置表格fixed贴合情况下还原滚动条

$3

- 新增类型声明文件.d.ts

$3

- 说明文档更新

#### v2.0.5

- 修复 offsetLeft 在嵌套路由下出现的计算偏差

- 使用 getBoundingClientRect 获取相应的距离参数

- 新增 static 模式

#### v2.0.3

- 更新浏览器兼容性，修改 Firefox 兼容策略

#### v2.0.2

- 正式版本更新

- 修复若干 bug

- 感谢 suchenglin2017 提供的新思路

#### tips

> 开启横向滚动条自适应功能之后，可能会出现滚轮滚动，表格滚动到底部时，滚动条没有复位的情况。此时，鼠标移动（进出表格）即可解决，或者调低 滚轮响应延迟
> 此项问题不是 bug 是因为做了函数节流优化，为了性能不得不做出的妥协，望周知。
> 另：滚轮响应延迟在 FireFox 下会有短暂响应延迟，功能不受影响

$3

| props | type | default | explain |
| ------ | -------------- | ------- | ------------------------------------------------------------------------------------------------ |
| fixed | Boolean | false | 开启滚动条自适应 |
| bottom | Number | 15 | 滚动条自适应距离窗口底部距离 |
| delay | Number | 300(ms) | 滚轮响应延迟 |
| static | Boolean | false | 静态表格,有预设值的表格请设置此项 |
| native | Boolean | false | 设置elTableColumn表格fixed属性必须设置此项还原滚动条，否则fixed 不会生效 |
| height | Number、String | auto | 开启纵向滚动功能，数字输入则默认单位px。此功能与 fixed 模式冲突，开启 fixed 模式则会丢弃该参数 |

$3

#### default

!image

#### fixed

!image

!image

#### native

!image

$3

!image

$3

你可以使用 yarn 或者 npm

``shell
yarn add el-table-bar-base
`

or

`shell
npm i el-table-bar-base
`

$3

main.js

`js
import Vue from 'vue'
import ElTableBar from 'el-table-bar-base'
import 'el-table-bar-base/lib/ElTableBar.css'

import { Scrollbar } from 'element-ui' // 必须引入 Scrollbar 组件才能正常使用

Vue.use(Scrollbar)
Vue.use(ElTableBar)
`

$3

`html

``

$3

发现 bug 后请按照 bug 现象新增一条 issue，issue 中请具体描述问题现象，最好能提供复现场景的代码片段（或者操作，GIF 图更佳），以上操作有利于作者定位问题，感谢大家的配合~！

> 作者希望这个插件能够大家带来实实在在的方便和便利，有问题会在百忙之中抽出时间定位问题并修复~希望觉得好用的同学给一个 star~不胜感激~