1.1.0 • Published 4 years ago
yss-drag-table v1.1.0
yssTable
介绍
uni-app基于uni-table的数据展示表格
1、使用说明
下载解压插件，并复制到项目的components目录下。
引入uni-table、uni-load-more
引用插件或使用easycom
引入sortablejs
npm install sortablejs --save
2、文件说明
yss-table
├─ css
│└─ iconfont.css 字体图标（排序的向上和向下三角）
├─ yss-table.vue 插件主文件
├─ yss-progress.vue 进度条插件，可以单独使用，具体参数看源码
3、属性说明
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| loading | Boolean | false | 显示加载 |
| loadMore | String | more | 上拉加载文字，参考uni-load-more |
| showLoadMore | Boolean | false | 是否显示上拉加载组件 |
| headerFixed | Boolean | false | 固定表头 |
| firstColumnFixed | Boolean | false | 固定首列 |
| sortWays | Array | 'none', 'asc', 'desc' | 排序方式 |
| emptyString | String | - | 数据为空时的占位符 |
| headers | Array | [] | 表头 |
| contents | Array | [] | 表格数据 |
| totalRow | Array | [] | 合计列 |
| @rowClick | Function | - | 行点击事件，回传参数为行数据 |
| @handleScroll | Function | - | 上拉加载事件 |
| @rowDrop | Function | - | 拖拽事件,直接上滑是往上滑，长按上滑是拖拽，设置属性：delay: 200,单位ms |
4、参数说明
表头参数 headers
| 参数 | 类型 | 说明 |
|---|---|---|
| label | String | 表头文字 |
| key | String | 绑定值 |
| width | String | 列宽 |
| sort | Boolean | 是否启用排序 |
| hidden | Boolean | 是否隐藏 |
| format | Object | 格式化参数 |
格式化参数 format
| 参数 | 类型 | 说明 |
|---|---|---|
| type | String | 格式化类型，可选值有：string 字符型、html html标签型、compute 计算型、progress 进度条 |
| keys | Array | 绑定值列表 |
| template | String、Function | 格式化模板，key用{下标}表示，如{0}，{1} |
具体应用参考示例