更新记录
1.3.8(2022-03-27) 下载此版本
-
新增
height
属性,可以用来设置表格高度。PS:当表格首次加载的内容总高度小于height(表格首次加载的内容不足以填充表格高度)时,表格不会发生滚动,无法触发
scroll-view
触底事件,也就无法触发本组件的下拉加载功能。所以请酌情设置表格高度或增加表格首次加载数据量。 -
因添加了
height
,原表格定位不再使用absloute
,所以现表格不会再覆盖页面中其他内容; -
新增
overflow
属性,用来定义单元格内容超出宽度时的显示方式。可选项有nowrap
不换行、wrap
换行, -
当设为不换行时单元格超出内容将隐藏,并显示
...
,点击单元格会将内容换行显示。PS:点击换行为单元格级别控制,当一行有多列内容超出宽度时,点击一个单元格切换换行后不会影响同行其他单元格
1.3.7(2022-03-18) 下载此版本
- 现在计算列格式化支持
function
了; - 更改排序方式,使中文排序更符合中国习惯(拼音排序),因此字符串格式化也可以正确的支持排序了,html的排序跟html标签配置相关,除非统一样式,否则不建议排序。
1.3.6(2022-02-11) 下载此版本
- 修复BUG
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
lyyTable
介绍
uni-app基于uni-table的数据展示表格
声明
为防止样式错乱,请务必在添加表头时为所有行都添加with
宽度,具体要求见下方说明。
本插件纯粹因个人爱好及自己工作需求而制作,自觉功能尚可,所以分享出来希望能够帮助有需要的人,觉得可用,你就用,用不来就换别的,插件市场那么多,大可不必一棵树上吊死。
本插件无盈利目的,又没有什么乱七八糟的许可协议,源代码清楚地写在插件文件里,你自己想怎么改就怎么改,有问题你好好问我好好答,不好好问懒得理你,身为一个前端,连基础的css和F12都不会吗?
插件说明就下面这些,看不懂就参考示例,示例也看不懂就换个插件吧,我这个不适合你。
此插件最初目的为展示数据,因此没有过多的修改数据的功能(如编辑删除内容、全选多选等),此类操作后续也不会添加,仅添加方便获取行数据的行点击功能。
言尽于此,好自为之
1、使用说明
1、点击
2、引入uni-table
、uni-load-more
3、在自己的项目中添加、配置<lyy-table></lyy-table>
组件标签
2、文件说明
lyy-table
├─ css
│└─ iconfont.css 字体图标(排序的向上和向下三角)
├─ lyy-table.vue 插件主文件
├─ lyy-progress.vue 进度条插件,可以单独使用,具体参数看源码
└─test.vue 示例
3、属性说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
height | String | 100vh(非H5) calc(100vh - 44px - env(safe-area-inset-top))(H5) | 表格高度(百分比请用vh,不要用%) |
overflow | String | nowrap | 单元格内容是否换行,不换行超出部分显示为...。可选项为nowrap 不换行、wrap 换行 |
loading | Boolean | false | 显示加载 |
loadMore | String | more | 上拉加载文字,参考uni-load-more |
showLoadMore | Boolean | false | 是否显示上拉加载组件 |
headerFixed | Boolean | false | 固定表头 |
columnFixed | Number | 0 | 固定列数 ver1.3.3新增 |
sortWays | Array | ['none', 'asc', 'desc'] | 排序方式 |
emptyString | String | - | 数据为空时的占位符 |
headers | Array | [] | 表头 |
contents | Array | [] | 表格数据 |
totalRow | Array | [] | 合计列 |
@rowClick | Function | - | 行点击事件,回传参数为行数据 |
@onPullup | Function | - | 上拉加载事件 |
4、参数说明
表头参数 headers
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
label | String | 是 | 表头文字 |
key | String | 是 | 绑定值 |
width | String | 是 | 列宽,带单位,百分比类(rpx、upx、vw)固定之类(px、em) |
sort | Boolean | 否 | 是否启用排序 |
hidden | Boolean | 否 | 是否隐藏 |
format | Object | 否 | 格式化参数 |
格式化参数 format
参数 | 类型 | 说明 |
---|---|---|
type | String | 格式化类型,可选值有:string 字符型、html html标签型、compute 计算型、progress 进度条 |
keys | Array | 绑定值列表 |
template | String、Function | 格式化模板,key用{下标}表示,如{0},{1} |
具体应用参考示例