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
初次提交
