小程序 table组件

最近有在小程序中用table的需求，但是没有找到有符合要求的组件，所以自己弄了一个，能满足基本需求。

组件下载:https://download.csdn.net/download/weixin_67585820/85047405

引入

 "usingComponents": {"table": "/components/table/table"}

文档

props

参数	说明	类型	默认值
header	表格头，下面详细说明	Array	[ ]
list	内容列表	Array	[ ]
show-active	当点击或长按时 选中的行是否显示背景颜色	Boolean	true
active-color	当show-active为true时有效；选中行的颜色	Boolean	#d6e8ff
is-sroll	表格是否能横向滚动	Boolean	false
col-width	is-sroll为true时有效；单位:rpx；平均每列的宽度	Number	假设有n列，n<3 ? 730/n : 300
max-line	最多显示几行文字，超出隐藏	Number	2

header props

header 为一个对象数组，数组中的每一个对象包含以下 key。

参数	说明
key	list中要显示的列对应key
title	表格中显示的文字
renderBody	是个function；优先级高于key，可以根据内容渲染显示文字
renderColor	是个function；可以根据内容渲染文字颜色

header的用法会有示例

外部样式

不再针对每一个详细说明，类名已经很明显了，大家这么聪明一看就懂
‘table-class’, ‘tr-class’, ‘td-class’, ‘th-class’, ‘tr-class_even’, ‘tr-class_odd’

events

事件名	说明
bind:onClick	点击行，从返回参数的 detail 中获取到index,data;index:点击的那一行，data：这一行的数据
bind:onLongPress	长按行，参数同上

示例

header的用法

wxml：

 <table header="{{header}}" list="{{list}}"/>

js：

Page:({data: {list: [{name: '飞飞',address: '山东省济南市',gender: 0},{name: '贝尔',address: '山东省青岛市',gender: 1}],header: [{key: 'name',title: '姓名',}, {key: 'address',title: '地址'},{title: '性别',renderBody: (item, index) => {return Number(item.gender) ? '女' : '男';},renderColor: (item, index) => {return Number(item.gender) ? '#fd4949' : '#1a84f1';},}]},
})

左右滑动

  <table header="{{header}}" list="{{list}}" is-scroll></table>

自定义样式

  <table header="{{header}}" list="{{list}}" th-class="th" td-class="td" tr-class_odd="tr-odd""></table>

.tr-odd {background-color: #f5f4ff;
}/*去掉边框*/
.td::before {display: none;
}.th {background-color: #6889ff;color: #fff;
}

table组件目前是这样，后面还会加新的功能