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}|

具体应用参考示例