v-for循环van-cell:自定义样式对第一个van-cell不生效

原因:不详

不一定正解的解决办法:在van-cell上使用v-for循环时,:key不为0就没问题了;

备注:只在这个案例里这样解决过,其他没遇到这个问题,所以不确定对所有相似问题是都有用的。

解决问题前后效果对比

1.不生效时:左边没对齐

对应的van-cell自定义样式:

.van-cell {
      padding: 0.1rem 0.2rem 0.1rem 0;
      border-bottom: 1px solid #ccc;
      font-size: 0.3rem;
}

 对应的van-cell循环:

<van-cell v-for="(item,i) in doctorInfoList" :key="i">
        <template>
          <span class="appointment-date">{{item.name}}</span>
          <span class="appointment-day">{{item.title}}</span>
          <span class="fee">诊疗费<br/>{{item.clinicFee}}</span>
          <span class="appointment-nun">{{item.outTime}}</span>
          <div class="appointment-surplus">
            <span class="all">总</span> {{item.ratedNum}}<br/>
            <span>余</span> {{item.lastNum}}
          </div>
          <van-button type="primary" size="small" @click="goAppointmentPage">挂号</van-button>
        </template>
      </van-cell>

这样按理说每一个经过循环的van-cell都应该有一样的padding才对,但是这里就是只有第一个padding还是van-cell原来的padding值;

2.用这个解决办法后

对齐了:

样式没有改过,真就只改了:key,使其从1开始

 有没有大佬知道为啥会这样啊?

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值