vant框架,实现checkbox的处理

<template>
  <div class="car-main">
    <div class="goodsList">
      <van-swipe-cell stop-propagation v-for="item in carList" :key="item.id">
        <van-checkbox
          v-model="item.isChecked"
          checked-color="#b4282d"
        >van-checkbox>

        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
        />
      van-swipe-cell>
      <van-submit-bar :price="total" button-text="提交订单" >
        <van-checkbox v-model="isAllChecked"  checked-color="#b4282d">全选van-checkbox>
      van-submit-bar>
    div>
  div>
template>

<script>
import carApi from "@/api/car/index"
import Vue from "vue";
import {
  SwipeCell,
  Card,
  Checkbox,
  SubmitBar,
} from "vant";

Vue.use(SwipeCell)
  .use(Card)
  .use(Checkbox)
  .use(SubmitBar);
export default {
  name: "car",
  data() {
    return {
      carList: [],
    };
  },
  created() {
    this.getCarList();
  },
  methods: {
   async getCarList() {
     await carApi.cartList({
          openId: "15845697415",
        })
        .then((res) => {
          res.data.forEach((ele)=>(ele.isChecked = false))
          this.carList = res.data;
        });
    },
  computed:{
     isAllChecked: {//监听isAllChecked的变化
      get() {
        return this.carList.every((ele) => ele.isChecked);
        //单个数据全部选定时,全选也就被选定了,单个数据有一个没被选定,那么全选也就不会被选定
      },
      set(val) {
        //val反应全选是否被选中时,全选中返回true;相反,返回false
        this.carList.forEach((ele) => {
          ele.isChecked = val;
          //选定全选后,单个数据根据全选情况而变化(全部被选中或全部没被选择)
        });
      },
    },
    total(){
      return this.carList.reduce((total,current)=>{
        if(current.isChecked){
          return total+current.number*current.retail_price*100
        }else{
          return total
        }
      },0)
    }
  }
};
</script>