element 多选择器来实现购物车勾选

在这里插入图片描述

在这里插入图片描述

放上自己写好的样式 然后直接循环成替换的数据。

在这里插入图片描述

因为没有循环官方给的数据 所以下面要做些改变。
后面是结算功能。勾选的样式和位置,通过clss绝对定位来改变,样式的√号 通过改变伪类 用字体图标来改变

<template>
    <div>
      <div class="content"></div>
      <div class="cart">
        <div class="cart-content">
          <div class="regest-1">
            <div>我的购物车</div>
            <div>我的历史订单</div>
          </div>
          <div class="regest-2">
            <div class="title_top">
              <div class="title_top-left">
                <span class="title_top_span2">课程</span>
              </div>
              <div>
                <span class="jinge">金额</span>
                <span>操作</span>
              </div>
            </div>
            <div class="huanxian" >
              <img src="../../assets/images/homepage_slices/zhixian-3.png">
            </div>






            <div class="xuanxiang">
              <el-checkbox class="dddd" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                <span class="btn">
                  全选
                </span>
              </el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in tempData" :label="city" :key="city">
                  <div class="goods goods-two">
                    <div class="cover">
                      <img src="../../assets/images/homepage_slices/vi.png">
                    </div>
                    <div class="details">
                      <p>{{city.country}}</p>
                      <div class="label">
                        <p>标签标签</p>
                        <p>标签标签</p>
                        <p>标签标签</p>
                      </div>
                    </div>
                    <div class="price">¥{{city.priece}}</div>
                    <div class="del"></div>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
              <div class="huanxian" style="margin-top: 30px">
                <img src="../../assets/images/homepage_slices/zhixian-3.png">
              </div>
              <div class="settlement">
                <span>(共 4 门,已选择 <span>{{this.checkedCities.length}}</span> 门)</span>
                <span>总计金额:<i class="sp-price">¥{{this.totalMoney}}</i></span>
                <span>去结算</span>
              </div>
            </div>






          </div>
        </div>
      </div>
      <div>
        <foot-public></foot-public>
      </div>
    </div>
</template>

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];

  export default {
    name: "cart",
    data(){
      return{
        tempData: [{
          id: 2,
          country: '中国',
          priece:100
        },
          {
            id: 3,
            country: '美国',
            priece:100
          },
          {
            id: 4,
            country: '俄罗斯',
            priece:200
          },
          {
            id: 5,
            country: '英国',
            priece:300
          },
          {
            id: 6,
            country: '法国',
            priece:400
          }
        ],
        checkAlla: false,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: true,
        totalMoney:0,

      }
    },
    computed:{
      msgFilteredHTML: {
        get() {
          return this.filterHTML(this.msg)
        },
        set(val) {
          this.msg = val
        }
      }
    },
    computed:{

    },
    methods:{
      handleCheckAllChange(val) {
        console.log(val)
        this.checkedCities = val ? this.tempData : [];
        this.isIndeterminate = false;

        this.jisuan()
        console.log(this.checkedCities)
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.tempData.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.tempData.length;
        this.jisuan()
        console.log(this.checkedCities)
      },

      jisuan(){
        this.totalMoney=0
        this.checkedCities.forEach(item => {
          console.log(item.priece)
          if(this.checkedCities){
            this.totalMoney += item.priece;
          }
          console.log(this.totalMoney)
        })
      }


    }
  }
</script>

<style scoped>
//用来存放修改的样式
  @import url("../../assets/el.css");
  .content{
    width: 100%;
    height: 650px;
    background-image: url(../../assets/images/homepage_slices/bg_char.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .cart{
    width: 100%;
    height: 1023px;
    background-color: #F4F4F4;
    position: relative;
  }
  .cart-content{
    width: 1200px;
    height: 100%;
    position: absolute;
    top: -380px;
    left: 50%;
    margin-left: -600px;
  }
  .regest-1{
    width: 100%;
    padding: 0 96px 0 70px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32px;
    color: #fff;
    margin-bottom: 43px;
  }
  .regest-1>div:nth-child(2){
    font-size: 21px;
  }
  .regest-2{
    width: 100%;
    height: 1300px;
    background-color: #fff;
    border-radius: 6px;
    padding-top: 104px;
    box-sizing: border-box;
  }
  .title_top{
    width: 100%;
    height: 50px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 50px;
    font-size: 24px;
    padding: 0 85px 0 85px;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .frame_dui{
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(../../assets/images/homepage_slices/marshalling-5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .title_top-left{
    display: flex;
    align-items: center;
  }
  .title_top_span{
    margin-left: 15px;
  }
  .title_top_span2{
    margin-left: 200px;
    font-weight: 400;
  }
  .jinge{
    margin-right: 134px;
  }
  .huanxian{
    width: 1200px;
    margin: auto;
    height: 2px;
    margin-bottom: 35px;
  }
  .goods:hover{
    transform: scale(1.01);
    transition: all .2s;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .goods-two{
    width: 1188px;
    margin: auto;
    height: 170px;
    padding: 0 85px 0 85px;
    box-sizing: border-box;
    display: flex;

    align-items: center;
  }
  .goods .choice2{
    width: 28px;
    height: 28px;
    background-image: url(../../assets/images/homepage_slices/marshalling-5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .choice2>img{
    width: 28px;
    height: 21px;
  }
  .cover{
    width: 220px;
    height: 128px;
    border-radius: 6px;
    background-color: #fff;
    margin-left: 111px;
    margin-right: 25px;
  }
  .cover img{
    width: 220px;
    height: 128px;
  }
  .details{
    width: 300px;
    height: 108px;
    margin-right: 140px;
  }
  .price{
    font-size: 24px;
    color: #E02020;
    float: right;
    margin-right: 140px;
  }
  .del{
    width: 25px;
    height: 25px;
    background-image: url(../../assets/images/homepage_slices/marshalling-1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

  }
  .label p{
    float: left;
    width: 90px;
    height: 21px;
    text-align: center;
    line-height: 21px;
    color: #fff;
    font-size: 12px;

  }
  .details>p{
    font-size: 18px;
    color: #000;
    margin-bottom: 27px;
  }
  .label>p:nth-child(1){
    background-image: url(../../assets/images/homepage_slices/colorblock.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .label>p:nth-child(2){
    background-image: url(../../assets/images/homepage_slices/colorblock-3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 12px;
  }
  .label>p:nth-child(3){
    background-image: url(../../assets/images/homepage_slices/colorblock-4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .settlement{
    width: 100%;
    height: 54px;
    padding-right: 65px;
    box-sizing: border-box;
    display: flex;
    line-height: 54px;
    justify-content: flex-end;
  }
  .settlement>span:nth-child(1){
    display: inline-block;
    font-size: 18px;
    margin-right: 12px;
    color: rgba(0, 0, 0, 0.25);
    line-height: 54px;
    font-weight: 400;
  }
  .settlement>span:nth-child(2){
    display: inline-block;
    display: flex;
    align-items: center;
    font-size: 24px;
    margin-right: 12px;
    color: #000;
    line-height: 54px;
  }
  .settlement .sp-price{
    display: inline-block;
    display: flex;
    display: inline-block;
    font-size: 32px;
    margin-right: 46px;
    color: #E02020;
    line-height: 54px;
  }
  .settlement>span:nth-child(3){
    display: inline-block;
    width: 189px;
    height: 54px;
    background-color: #E02020;
    border-radius: 50px;
    text-align: center;
    line-height: 54px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
  }

</style>






el.css文件样式

.xuanxiang .el-checkbox__inner{
    width: 28px !important;
    height: 28px;
}
.xuanxiang  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color:#fff
}
.xuanxiang  .el-checkbox__inner{
    position: absolute;
    left: 85px;
    top: -18px;
    overflow: hidden;
}
.xuanxiang .el-checkbox__label{
    padding-left: 5px;
}
.xuanxiang .el-checkbox{
    margin-right: 0px;
}
.dddd{
    position: absolute;
    top: 211px;

}
.xuanxiang .el-checkbox{

}
.xuanxiang .el-checkbox__label{}
.quanxuanze{
    position: absolute;
    top: 225px;
}
.btn{
    position: absolute;
    top: -18px;
    left: 110px;
    font-size: 24px;
    font-weight: 400;
    color: #000;
}
.xuanxiang .el-checkbox__inner{
    overflow: visible;
}
.xuanxiang .el-checkbox__input.is-checked .el-checkbox__inner::after{
    transform: rotate(-1deg) scaleY(1);
}
.xuanxiang .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    border-color: #D2D2D2;
}
.xuanxiang .el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #D2D2D2;
}
.xuanxiang .el-checkbox__inner::after{
    width: 28px;
    height: 21px;
    content:'\e60b';
    border: none;
    color: #FA6400;
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 30px;
    position: absolute;
    left: 0;
}

没有过多技术含量纯属个人记录

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页