微信小程序制作表格的方法

本文实例为大家分享了微信小程序制作表格的具体代码。

微信小程序中没有专门的表格制作工具，不过使用列表渲染可以实现，

下面是我做的表格图片：

方法如下：

在XXX.wxml中填写下面的代码

view class=' table ' view class=' tr BG-w ' view class=' th '参数/view view class='th-2 '内容/view/view block wx : for=' { { listData } } ' wx : key=' {[code]} ' view class=' tr BG-g ' wx : if=' { { index % 2==0 } } ' view class=' TD-1 '可选=' true ' { item。code } }/view class=' TD-2 '可选=' true ' scroll-y=' true ' text class=' th-text ' style=' overflow-y : auto overflow-x : scroll ' selected=' true ' { item。文本} }/文本/视图！-view class=' TD ' { item。type } }/view-/view class=' tr BG-G2 ' wx : else view class=' TD-1 '可选=' true ' { item。code } }/view view class=' TD-2 '可选=' true ' roll-y=' true ' text class=' th-text ' style=' overflow-y : auto；overflow-x : scroll ' selected=' true ' { item。文本} }/文本/视图/视图/块/视图在XXX.wxss中添加如下代码：表格{ border: 2px实心深灰色；宽度： 100%;保证金-最高： 1雷姆；右页边距： 1雷姆；边距-左侧： 1个字符；}.tr { display: flex宽度： 100%;正义-内容：中心；高度： 3毫米项目：居中；}.TD {宽度：20%；正义-内容：中心；显示： flex文本对齐：中心；右边框： 2px实心# ddd高度： 100%;}.TD-1 {宽度：19%；正义-内容：中心；显示： flex文本对齐：中心；右边框： 2px实心# ddd高度： 100%;}.td-2 {宽度：80%;正义-内容：中心；右边框： 2px实心# ddd文本-左对齐：高度： 100%;最大宽度： 100%;padd : 40 rpx 0；}.BG-w {背景： # afb4db}.BG-g {后台： # e6f3f 9；}.BG-G2 {背景： # fff}.th { width : 19%；正义-内容：中心；color : # fffdisplay : flex height : 3 remalign-items :居中；右边框： 2px实心# ddd}。th-2 {宽度： 80%;正义-内容：中心；color : # fffdisplay : flex height : 3 remalign-items :居中；最大高度： 3雷姆；最大宽度： 80%;}.正文{宽度： 80%;正义-内容：中心；color: # 000display:块；高度： 3毫米项目：居中；最大高度： 3雷姆；最大宽度： 80%;}在XXX.js页面的页定义下面的数据

var idinfolist=[ { 'code': '结果，' text': '' }，{ 'code': '省，' text': '' }，{ 'code': '市，' text': '' }，{ 'code': '县，' text': ''}，{ 'code': '性别，' text': ''}，{ 'code': '出生年月，' text': ''}，{ 'code': '地址，' text ' : ' ' }]Page({ data : { list data : idinfolist，inputValue: ' '，//用于显示输入语句searchinput: ' '，//用户输入的查询语句})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。