更新记录
1.0.0(2022-06-01) 下载此版本
实现表格可拖拽
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
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} |
具体应用参考示例