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=0this.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;
}
没有过多技术含量纯属个人记录
