vue-table 组件
功能：
- 固定表格头、左侧栏
- 单元格整体居中，局部对齐
- 虚拟的横向滚动条
解决问题:
后台系统的列表页中,如果不做处理 在内容过多情况下.会引起页面滚动.同时会撑开页面. 表头/两侧会滚动条隐藏掉.不利于数据的展示
解决方法:
- 全局滚动.(表格过大.页面整体会被撑开)
- 容器内滚动.(表格显得很狭窄)
- 垂直方向全局滚动, 水平方向是局部滚动. (请自行使用flex布局使得表格自身横向滚动,纵向自适应页面高度.页面宽度不被撑开, 加虚拟滚动条辅助时候水平滚动不需要拉到最后)
- 固定表格头/两侧边
主要依赖
vue@2.4.4
Build Setup
-
git clone
-
cd dir,执行
npm install完成依赖包安装
-
开发环境(访问 http://localhost:8082/demo/)
npm run dev -
生产环境
npm run build
Fixed-Table 使用
固定表头, 左侧以及右侧
需要通过一定的slot插入相应的内容达到固定
options
| props | 类型 | 默认 | 描述 |
|---|---|---|---|
| offsetLeft | String, Number | 0 | 左侧偏移 |
| offsetTop | String, Number | 0 | 顶部偏移 |
| scrollTarget | Object, String | 无 | 滚动容器, 可传dom元素或者选择器, 没有默认为window, 既全局滚动.(DEMO1和2) |
| useTrans | Boolean | false | 是否使用动画做回退方案, 在safari和firefox下会有闪动. 所以safari和firefox默认开启. |
| selfScroll | Boolean | false | 是否自滚动. 垂直滚动会依赖全局, 横向滚动会依赖自身. 所以需要额外样式是的容器能产生横向的滚动条.(DEMO 3) |
slot
需要通过slot插入到相应的插槽中, 通过对插槽的控制达到固定效果
| slot | 介绍 |
|---|---|
| leftThead | 左侧表头 |
| thead | 中间表头 |
| rightThead | 右侧表头 |
| leftBody | 左侧固定表体 |
| tbody | 表体 |
| rightBody | 右侧固定表体 |
align-cell 使用
options
| props | 类型 | 默认 | 描述 |
|---|---|---|---|
| dir | String | 'l' | 对齐方向 |
| tag | String | 'td' | 渲染的标签 |
scroll-x-bar 使用
虚拟的横向滚动条, 需要让容易自行产生横向滚动.
让容器在页面高度不足的时候, 也可以拖动横向滚动条.
一定要让容器产生横向滚动