表格隔行颜色区别

PC端

方式一：

<y-table
    v-loading="tableLoading"
    :showHeader="false"
    element-loading-text="加载中..."
    :data="policyList"
    stripe
    highlight-current-row
>

注：   stripe: 隔行颜色变色

          highlight-current-row: 鼠标放上去列表高亮

方式二：

<y-result
  :option="proof"
  v-for="(proof, index) in proofList"
  :key="index"
  @handleClick="handleClick"
   v-bind:style="{ 
backgroundColor: index % 2 == 0 ? '#FFE4E1' : '#FFF0F5',
}"
>

注：随着index的奇、偶 而变化

H5端

    <van-list  v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
      <van-cell class="work-cell" v-for="item in slList" :key="item.id">
        <van-field v-model="item.protectName" label="姓名:" readonly/>
        <van-field v-model="item.bzhm" label="身份号码:" readonly/>
        <van-field v-model="item.sbsj" label="提交日期:" readonly/>
        <van-cell style="float: left">办理进度：
          <!--   1. 比对不成功，未通过审核-->
          <a style="margin-left:2em" v-if="item.xxbdjg==='0' && item.sjz==='未通过审核' ">
            核验未通过，请查看告知书
            <a style=" margin-left: 32%;color:red" @click="renderGZSPDF(item.gzsmogoid)">查看告知书</a></a>
          <!--2.待审核-->
          <a style="margin-left:2em" v-if="item.sjz==='待审核'">
            待审核<br/>
          </a>
        </van-cell>
        <!--1.信息比对不成功-->
      </van-cell>
    </van-list>

相关JS 

 //odd 奇
.work-cell:nth-child(odd){     
  /deep/ .van-cell{
    background-color: #F5F5F5!important;
  }
}
// even 偶
.work-cell:nth-child(even){
  /deep/ .van-cell{
    background-color: #F5F5F5!important;
  }
}

                                                                                                                                          ywtb+yzdy