table 表格基本使用组件，让你制作简单表格只需要专注内容，而不用过度专注样式。

此组件基本全平台支持。(支付宝，百度，头条小程序理论上都支持，但是没有很细致的测试这几个平台)

功能亮点

自定义全局表格样式

自定义局部表格样式

表格内容自定义

表格多选

未实现

合并单元格

调整列宽，行高

效果演示

WX20190518-141534@2x.png

调用方式

默认效果

序号

姓名

年龄

爱好

{{ item.id + 1 }}

{{ item.name }}

{{ item.age }}

{{ item.hobby }}

自定义样式

姓名

年龄

爱好

操作

{{ item.name }}

{{ item.age }}

{{ item.hobby }}

编辑

import tTable from '@/components/t-table/t-table.vue';

import tTh from '@/components/t-table/t-th.vue';

import tTr from '@/components/t-table/t-tr.vue';

import tTd from '@/components/t-table/t-td.vue';

export default {

components: {

tTable,

tTh,

tTr,

tTd

},

data() {

return {

tableList: [{

id: 0,

name: '张三',

age: '19',

hobby: '游泳'

},

{

id: 1,

name: '李四',

age: '21',

hobby: '绘画'

},

{

id: 2,

name: '王二',

age: '29',

hobby: '滑板'

},

{

id: 3,

name: '码字',

age: '20',

hobby: '蹦极'

}

]

};

},

methods: {

change(e) {

console.log(e.detail);

},

edit(item) {

uni.showToast({

title: item.name,

icon: 'none'

});

}

}

};

t-table

表格父组件，仅包含 tr 组件

属性说明

属性名

类型

默认值

说明

border

String

1

边框粗细

border-color

Color

#d0dee5

边框颜色

is-check

Boolean

false

是否开启列多选

@change

function

开启多选生效，返回值 event = [0,1,2]

t-tr

表格行组件 仅包含 th,td 组件

属性说明

属性名

类型

默认值

说明

font-size

String

15

行字体大小

color

Color

#3b4246

行字体颜色

align

String

center

行字体对其方式，可取值：'left' 左对齐;'center' 居中对齐;'right' 右对齐;

t-th

表格内的表头单元格组件

属性说明

属性名

类型

默认值

说明

align

String

center

行字体对其方式，可取值：'left' 左对齐;'center' 居中对齐;'right' 右对齐;

t-td

表格中的标准单元格组件

属性说明

属性名

类型

默认值

说明

align

String

center

行字体对其方式，可取值：'left' 左对齐;'center' 居中对齐;'right' 右对齐;

Tips

不提供定制，仅有这些简单内容

如需更复杂表格，参考源码逻辑，可自行扩展

不建议加载过多数据，如到一定数据，比如 10 条，建议制作翻页

更新日志

v1.0.0

初次提交