简介：基于 css sticky 特性实现的 Table 组件, 支持 Vue2.x / Vue3.x 演示：https://linpengteng.github.io/example/vue-sticker-table

安装

  yarn add vue-sticker-table@^2.0.0 # Vue2.x

  yarn add vue-sticker-table@^3.0.2 # Vue3.x

表格选项 - table

|字段|说明|类型|默认值| |:---|:---|:---:|:---:| | rowKey | 表格行 key 的取值 | string | '' | | layout | 表格 table-layout | 'fixed' | 'auto' | 'auto' | | columns | 表格列选项 | 具体项见下表 | - | | scrolls | 设置横向或纵向滚动 | boolean | undefined | { x?: string | number, y?: string | number} | - | | customRow | 设置行属性, 例如: 行单击事件 | (record: Record<string, any>, index: number) => { on?: Record<string, Function> } | - | | immediate | 是否立刻执行 loadData | boolean | true | | paginate | 表格分页选项 | boolean | number | pagination | false | | loadData | 表格数据源加载函数 | (pagination: Pagination) => any | - | | handleData | 数据源自定义处理函数, 处理 loadData 返回的数据源 | (response: any) => { data: Array<any>, pageNo: number, totalPage: number, totalCount: number } | - |

表格列选项 - columns

|字段|说明|类型|默认值| |:---|:---|:---:|:---:| | title | 列头显示文字 | string | - | | dataIndex | 列数据在数据项中对应的 key | string | - | | scopedSlots | 列数据在数据项中自定义slot | { customRender: string } | - | | ellipsis | 单元格内容根据宽度自动省略 | boolean | - | | width | 表格列宽度 | string | number | - | | maxWidth | 表格列最大宽度 | string | number | - | | minWidth | 表格列最小宽度 | string | number | - | | fixed | 表格列固定方向 | 'left' | 'right' | - |

表格滚动选项 - scrolls

|字段|说明|类型|默认值| |:---|:---|:---:|:---:| | x | 表格横向滚动 | string | number | - | | y | 表格竖向滚动, 当值为负值时，则为 window.innerHeight + y | string | number | - |

表格分页选项 - paginate

|字段|说明|类型|默认值| |:---|:---|:---:|:---:| | pageNo | 当前页数 | number | 1 | | pageSize | 每页条数 | number | 20| | totalPage | 当前总页数 | number | - | | totalCount | 当前总条数 | number | - | | showPageSize | 显示的页码个数 | number | 6 |

表格卡槽选项 - slot

|字段|说明|类型|默认值| |:---|:---|:---:|:---:| | pagination | 分页卡槽, 自定义分页组件 | Component | - |

许可证

MIT