weixin_43743620
weixin_43743620
采纳率50%
2020-02-14 15:57

vue中,如何根据坐标给v-for渲染出来的表格添加样式

图片说明


比如说后台数据返回的是(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条回答

  • qq_32549451 不过围城 1年前

    有多种方法:
    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>
    
    1. 使用 :style绑定样式
    <div v-bind:class="{ class1: 状态 ===1, class2: 状态 ===2, class3: 状态 ===3,  }"></div>
    
    点赞 1 评论 复制链接分享