微信小程序怎么创建动态表格

今天小编和大家一起学习的是如何在微信小程序中制作动态处理表格?一定有许多朋友很是兆链期待吧，下面就是详细的内容。

想在小程序里实现如上的UI，遇到这几个问题：

小程序中整体的排版

小程序里是没有table标签的，需要自己实现

下方的加号可以实现增加一行数据

下方的减号可以实现减去一行数据

首先，小程序视图层XML，通过激冲wx:for循环读取逻辑层的数据，把数据渲染到前端:

然后，逻辑层中，初始化需要展示的数据：

table的CSS通过flex设置样式:

然后，下方的加号减号图片，都通过侦听点击，触发事件，使得逻辑层改变数据：

最后，逻辑层收到事件后，更改table中的表格数据，通过setData函数更新视图层：

以上就是如族铅孙何在微信小程序中制作动态处理表格的全部内容了

可以通过在 uni-table 组件上绑定 v-for 来实现不同行的颜色变化。

步骤如下：

1.定义 data 属性，其中 colorArr 存放的是颜色字段：

data () {

return {

list: [],

colorArr: ['#f00', '#0f0', '#00f', '#fff']

}

},

2.在 uni-table 组件上绑定 v-for

<uni-table-column v-for="(item, index) in row.list"

:key="index"

:type="item.type"

:label="item.label"

:width="item.width"

:align="item.align"

:show-overflow-tooltip="item.showOverflowTooltip"

:class="['cell-type-'+item.type, {'bg-light': row.type=='light'}]"

:style="{backgroundColor: colorArr[index]}"

>

{{ item.value }}

</uni-table-column>

上述代码在 uni-table 组件上绑定 v-for 来循环 list，在 uni-table-column 标签上传递行索引index 即可动态改变单元格的背景颜色。另外，也可以给 uni-table-column 标签设置其他的样式。

wxml代码：源戚

<view class="container">

<view class="table">

<view class="tr">皮裤

<view class="th">标题1</view>

<view class="th">标题2</view>

<view class="th">标题3</view>

<view class="th">标题4</view>

<view class="th">标题5</view>

</view>

<view class="tr" wx:for="{{5}}">

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

</view>

</雹握陵view>

</view>

wxss代码：

/* pages/table/table.wxss */

page {

font-size: 14px

color: #333

}

.table {

border:1px solid #dadada

border-right: 0

border-bottom: 0

width: 98%

}

.tr {

width: 100%

display: flex

justify-content: space-between

}

.th,.td {

padding: 10px

border-bottom: 1px solid #dadada

border-right: 1px solid #dadada

text-align: center

width:100%

}

.th {

font-weight: 400

background-color: #dadada

}

---