微信小程序如何定制表格组件

背景

最近想自己修补一个小程序，里面有很多数据显示部分，想用表格显示。但是微信小程序没有表组件，我就自己瞎折腾了一个，勉强用得上。

你可以看到效果：

etable使用介绍

etable的使用非常简单，分为三个阶段：引入、使用和配置

1.介绍

首先，将页面中的json文件配置为如下使用：

{ '使用组件' : {'e表' : '/能力/e表/e表' }} 2。使用

在需要使用wxml页面的地方使用它，如下所示：

视图样式=“填充： 10rpx”etable config=' { { config } } '/etable/view 3，配置

在配置阶段，主要配置对象配置。该对象中有几个属性，它们是

content-table数据，数组类型，需要的titles-table表头，数组类型，需要的道具-每个列对应的数据的table键值，column width-table列宽，值类型使用rpx，注意：(titles，props，column widgets这三个数组的长度要一致。)border - etable是否有边框，Boolean类型，truestripe- etable默认是否有斑马纹，Boolean类型，truehead bgcolor默认-etable标题栏的背景色，String类型，默认#ffffff(即白色)，以下示例代码：

/* * *页面的初始数据*/data : { config : { content :[]，titles: ['id '，' first name '，' age '，' school']，props: ['id '，' name '，' age '，columntwidth :[' 80 rpx '，' 140rpx '，' 120rpx '，' 390rpx']，border: true，stripe : true，//head color : ' # dddd ' } }，Onload:function(){//模拟数据let content=[{id:1，name3360' pxh '，age:13，school: '暨南大学计算机' }，{ ididsetdata ({'config。content' : content})}，2000)} e表

要调整斑马纹的背景色，可以在etable/etable.wxss中找到第39-45行，如下，可以自己修改。etable-content-row-bg1 { background-color : # ffffff；}.etable-content-row-bg2 { background-color : # EFE fef；}要调整边框的颜色，需要在etable.etable.wxss中找到etable-header-column-border和etable-content-column-border两个类，然后修改相应的颜色值。这里就不细说了。

组件的Github地址

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。