当前位置：首页 > news >正文

uniapp做app,使用v-for遍历渲染第二层的时候，打包到手机上渲染不出第二层的数据

news 来源：原创 2025/5/25 21:05:23

1.打包apk要严格注意一点，在data中定义的时候要把第二层定义上，

   pointspower: [{
                       jcdbh: '1',
                       cgqbhs:[]

}]

不然会出现未定义的情况，直接把二层结构定义上，有利无害

2.渲染的时候要注意为空的情况

要使用v-if来判断，这个时候涉及到一个v-if，v-for同时使用的问题（有兴趣去看我之前文章，说过这个问题）

在v-for之前使用v-if判断非空

3.v-for="(sensor, sensorIndex) in item.cgqbhs || []"遍历的时候加 ||[]

4.之前听说强制刷新，有人的问题可以解决，目前强制刷新不能解决我的问题，其他场景可以尝试

<view class="table-container">
                   <table width="100%">
                       <thead>
                           <tr>
                               <th class="col-25">测点编号</th>
                               <th class="col-25">传感器编号</th>
                               <th class="col-50">传感器值</th>
                           </tr>
                       </thead>
                       <tbody>

                           <template v-for="(item, index) in pointspower">
                               <template v-if="item.cgqbhs && item.cgqbhs.length > 0">
                               <tr v-for="(sensor, sensorIndex) in item.cgqbhs || []"
                                   :class="{ 'last-item': isLastItem(index, sensorIndex) }">

                                   <td v-if='sensorIndex === 0' :colspan="item.cgqbhs.length"
                                       class="center-cell cell ">
                                       {{ item.jcdbh }}
                                   </td>
                                   <td v-else :colspan="item.cgqbhs.length" class="center-cell ">

                                   </td>
                                   <td class=" col-25">{{ sensor.cgqbh_dictText }}</td>
                                   <td class="cell col-50">
                                       <input :value="sensor.pl" type="number" placeholder="输入观测值"
                                           @input="handleInputs($event, index, sensorIndex)"
                                           @blur="updateValues(index, sensorIndex)" />
                                   </td>
                               </tr>
                           </template>
                           </template>
                       </tbody>
                   </table>

               </view>

相关文章：