小程序 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组件目前是这样，后面还会加新的功能