更新记录

1.3.2（2023-06-07） 下载此版本

更新slot为具名插槽，微信小程序slot无效

1.3.1（2023-06-07） 下载此版本

更新须知

1.3.0（2023-05-22） 下载此版本

解决本地分页少一行bug

平台兼容性

uni-app

其他

GUI-Table 表格

基于uni-table表格二次封装，支持columns配置化、固定表头、固定列、插槽、分页、数据格式化、数据快捷运算等功能

组件名：g-ui-table

写在前面：

此组件是作者工作中需要封装的，所以的功能也是为了满足作者工作中的需求

开广告就是为了避免你们下载，我只是自己要用，你们好不好用管我屁事！

觉得不好用，不喜欢的，不要下载，更不要瞎评论，我会一个一个骂过去！

好好提问我还能更新维护一下，上来就差评的我直接开喷，什么玩意，贷款2万去深造下好吗？？？

使用需知

请先下载decimal.js及moment

npm install decimal.js moment --save -D

使用ellipsis省略请先检查是否安装g-ui-text

手动安装

注意！！！！！！

1、因小程序的样式隔离问题，导致固定表头固定列等功能在小程序下无法生效，暂时没想到解决方法，如果有大佬知道如何解决，可以留言

2、合计的配置keys权重小于key，不影响之前配置key的用户使用

3、同第一条的原因，在columns内配置headerStyle时，background会有样式问题

4、因个人原因，现在无法测试APP端功能，所以有APP问题的用户请自行解决（源码自己改，改完可以留言告诉我下

API

Table Props

columns

filter-data 示例

[{
    text: "", //显示
    value: "" // 值
}]

columns type

示例

colums: [
    { title: '排序' ... type: 'sort' },   // 1
    { title: '数字' ... key: 'number', type: 'number', precision: 2 },    // 999999.99
    { title: '价格' ... key: 'price', type: 'price', precision: 2, symbol: '¥' }, // ¥999,999.99
    { title: '时间' ... key: 'date', type: 'date', format: 'YYYY-MM-DD' },    // 2023-02-27
    { title: '字典' ... key: 'dict', type: 'dict' },  // 是
    { title: '数组' ... key: 'array', type: 'array' },    // name1,name2
    { title: '相加' ... argKeys: ['num1', 'num2', 'num3'], type: 'add' }, // 333
    { title: '递减' ... argKeys: ['num1', 'num2', 'num3'], type: 'sub' }, // 111
    { title: '相乘' ... argKeys: ['num1', 'num2', 'num3'], type: 'mul' }, // 24642
    { title: '递除' ... argKeys: ['num1', 'num2', 'num3'], type: 'div' }, // 0.5
    { title: '百分比' ... argKeys: ['num1', 'num2', 'num3'], type: 'percent' },    // 50.00%
]
data: [
    { number: '999999.990000', price: '999999.990000', date: '2023-02-27T12:36:58', dict: '1', array: [{ name: 'name1' },{ name: 'name2' }], num1: '111', num2: '222', num3: null}
]

pagination

total config

slot

Tip 因微信小程序框架问题，暂不支持具名插槽传值，所以无效

 <g-ui-table :columns="columns">
     <template v-slot:name="{value, row, col, index}">
       {{ col.title }} // slot-1
       {{ value }} // slot-1
     </template>
     <template v-slot:age="{value, row, col, index}">
       {{ col.title }} // slot-2
       {{ value }} // 11
     </template>
 </g-ui-table>

 columns: [
     { title: 'slot-1', key: 'name' slot: true },
     { title: 'slot-2', key: 'age' slot: true }
 ]
 data: [
     { name: 'slot-1', age: 11 },
     { name: 'slot-2', age: 14 }
 ]

Table Events

Table Methods

Tip 因微信小程序框架问题，暂不支持如下方法