问题现象:需要对微信小程序中的表格进行编辑
问题解决:
1、页面布局
表格主体采用flex布局来模拟实现,分别用tr和td代表行和每个单元格,由于需要展示的内容较多,所以使用scroll-view来让表格可以水平滑动。
1)修改wxml内容如下所示:
<scroll-view scroll-x style="width: 100%" class="table">
<block wx:for="{
{tables}}" wx:for-item="table" wx:for-index="table_index">
<view class="tr gray" wx:if="{
{table_index % 2 == 0}}">
<view class="td" wx:for="{
{table}}" wx:item="item" bindtap="openModal" data-id="{
{table_index}}">{
{item}}</view>
</view>
<view class="tr" wx:else>
<view class="td" wx:for="{
{table}}" wx:item="item" bindtap=