uniapp中的表格组件uni-table怎么改变颜色的方法

zihao

前言

我们在编写uni小程序时经常需要使用表格,有一天甲方突然要你别人退货的,或者是别人已经选择过的,进行颜色标记,以让用户区分.
我搜了下也可能我搜的方式不对,就一直没找到方法,没办法只能自己研究一下了.

成品展示

这是实现后的样子:

解决办法

将数据赋值进某个集合中的每一条item中的某个参数,我这里是赋值0给color参数,就代表是白色,赋值为其他数值则为蓝色（也就是说quotaList要包含每条的颜色信息“color"，值为0或者1）👇

  <uni-table ref="table" :loading="loading" border stripe type="false" emptyText="暂无更多数据"
             @selection-change="selectionChange">
    <uni-tr>
      <uni-th width="40">参数1</uni-th>
      <uni-th width="50" align="center">参数2</uni-th>
      <uni-th width="10">参数3</uni-th>
      <uni-th width="10" align="center">参数4</uni-th>
    </uni-tr>
    <uni-tr v-for="(item, index) in quotaList" :key="index" @row-click="rowclick(item)"
            :style="{ backgroundColor: item.color === 0 ? 'white' : 'blue' }"
    >
      <uni-td>
        <view class="name">{{ item.aa}}</view>
      </uni-td>
      <uni-td align="center">{{ item.bb}}</uni-td>
      <uni-td align="center">{{ item.vv}}</uni-td>
      <uni-td align="center">{{ item.dd}}</uni-td>
    </uni-tr>

  </uni-table>