vue-table 组件

Demo

功能：

• 固定表格头、左侧栏
• 单元格整体居中，局部对齐
• 虚拟的横向滚动条

解决问题:

后台系统的列表页中,如果不做处理 在内容过多情况下.会引起页面滚动.同时会撑开页面. 表头/两侧会滚动条隐藏掉.不利于数据的展示

解决方法:

• 全局滚动.(表格过大.页面整体会被撑开)
• 容器内滚动.(表格显得很狭窄)
• 垂直方向全局滚动, 水平方向是局部滚动. (请自行使用flex布局使得表格自身横向滚动,纵向自适应页面高度.页面宽度不被撑开, 加虚拟滚动条辅助时候水平滚动不需要拉到最后)
• 固定表格头/两侧边

主要依赖

[email protected]

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 使用

虚拟的横向滚动条, 需要让容易自行产生横向滚动.

让容器在页面高度不足的时候, 也可以拖动横向滚动条.

一定要让容器产生横向滚动