比如说后台数据返回的是(1,A),状态为已入库,那我该如何将获取到的坐标对应图片的坐标,然后将图片li对应坐标的颜色改为已入库对应的绿色
表格代码如下:
<table class="table-container am-active">
<tbody class="table-body-container" v-if="rows > 0 && columns > 0">
<tr v-for="rowidx in rows" :key="rowidx">
<td v-for="columnidx in columns" :key="columnidx" class="container-detail-td">
<div class="table-sample-big" @click="selfcllick(rows+1-rowidx,columnidx)"></div>
</td>
</tr>
</tbody>
</table>
有多种方法:
1. 用v-if来判断展示不同的标签
<div v-if="状态===1" class="table-sample-1" @click="selfcllick(rows+1-rowidx,columnidx)"></div>
<div v-if="状态===2" class="table-sample-2" @click="selfcllick(rows+1-rowidx,columnidx)"></div>
<div v-if="状态===3" class="table-sample-3" @click="selfcllick(rows+1-rowidx,columnidx)"></div>
<div v-bind:class="{ class1: 状态 ===1, class2: 状态 ===2, class3: 状态 ===3, }"></div>