如何在微信小程序中制作表格-创新互联

如何在微信小程序中制作表格？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

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

 
  参数
  内容
 
 
  
   {{item.code}}
   
   {{item.text}}
   
   
  
  
   {{item.code}}
   
   {{item.text}}
   
  
 

在XXX.wxss中添加如下代码：

.table {
 border: 2px solid darkgray;
 width: 100%;
 margin-top: 1rem;
 margin-right: 1rem;
 margin-left: 1rem;
 
 
}
.tr {
 display: flex;
 width: 100%;
 justify-content: center;
 height: 3rem;
 align-items: center;
}
.td {
  width:20%;
  justify-content: center;
  display: flex;
  text-align: center;
  border-right: 2px solid #ddd;
  height: 100%;
}
.td-1 {
  width:19%;
  justify-content: center;
  display: flex;
  text-align: center;
  border-right: 2px solid #ddd;
  height: 100%;
}
.td-2 {
  width:80%;
  justify-content: center;
  border-right: 2px solid #ddd;
  text-align: left;
  height: 100%;
  max-width: 100%;
  padding: 40rpx 0;
}
.bg-w{
 background: #afb4db;
 
}
.bg-g{
 background: #E6F3F9;
}
.bg-g2{
 background: #fff;
}
.th {
 width: 19%;
 justify-content: center;
 color: #fff;
 display: flex;
 height: 3rem;
 align-items: center;
 border-right: 2px solid #ddd;
}
.th-2 {
 width: 80%;
 justify-content: center;
 color: #fff;
 display: flex;
 height: 3rem;
 align-items: center;
 max-height: 3rem;
 max-width: 80%;
}.th-text {
 width: 80%;
 justify-content: center;
 color: #000;
 display: block;
 height: 3rem;
 align-items: center;
 max-height: 3rem;
 max-width: 80%;
}

在XXX.js页面的pages定义下面的数据

var idinfolist = [
 { "code": "结果", "text": '' },
 { "code": "省", "text": '' },
 { "code": "市", "text": '' },
 { "code": "县", "text": ''},
 { "code": "性别", "text": ''},
 { "code": "出生年月", "text": ''},
 { "code": "地址", "text": ''}
]
 
Page({
 data: {
  listData: idinfolist,  
  inputValue: '', //用于显示输入语句
  searchinput: '', //用户输入的查询语句
 })

看完上述内容，你们掌握如何在微信小程序中制作表格的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！