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

最新推荐文章于 2022-09-17 11:32:12 发布
最新推荐文章于 2022-09-17 11:32:12 发布
阅读量762 收藏 3
点赞数
分类专栏： element 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoHelloWord/article/details/108874438
版权

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

因为没有循环官方给的数据 所以下面要做些改变。
后面是结算功能。勾选的样式和位置，通过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;
}

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

真的不想哇
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element vue 动态单选_如何在Vue3中使用Element Plus单选按钮组
weixin_34099891的博客
01-14 1356
工具HBuilderX浏览器Gitnpm技术Vue3Element PlusJavaScript在使用Vue3 + Element Plus搭建的项目时，可以使用Element Plus中的控件el-radio-button组控制输入框显示值。当单选按钮组值选中哪一个，对应输入框显示这个值。下面利用实例说明：操作步骤：1、打开HBuilderX工具，创建Vue3+Element Plus框架项目；...
【vue组件】vue+element ui 实现简单购物车
loyd3的博客
08-21 4093
【代码】【vue组件】vue+element ui 实现简单购物车。
Vue+Element+computed实现购物车
weixin_33857230的博客
03-17 795
本人写的小程序，功能还在完善中，欢迎扫一扫提出宝贵意见！ 该购物车效果采用的是Element-ui库实现的。 采用了computed计算属性来实现逻辑操作。 功能分析： 全选/全不选/单选。 数量增加、数量减少。 总金额=数量*单价。 商品总价：每一项的总金额相加。 商品总数：每一项的数量相加。 删除功能。 废话不...
vue+element 实现购物车功能
ShinyRuo_的博客
06-10 2461
全选,多选,价格计算,开箱即用（没scss的安装下scss ） template <div class="cart-group"> <div class="sellect-all"> <div class="radio"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
vue+element-购物车的操作
红岸基地
07-10 2635
第一种：效果预览 思路分析 这个其实不麻烦，首先我们被选中的table是属于多选的，也就是说element是提供了一个被选中的行的数组函数的，那么这样我们可以拿到用户是选择了哪些行的，这是第一步，第二步是我们怎么保证每一页选择了以后别的页被选中的选项还在，这个我之前的博客是更新了，这里不说怎么实现的了，也是一个字段就可以了，第三步就是我们将用户选择的数据新加到购物车的那个table里面，第四...
详解关于element级联选择器数据回显问题
10-17
总结来说，解决 Element UI 级联选择器数据回显问题的关键在于： 1. 理解级联选择器的数据结构，包括 `value`、`label` 和子级 `children` 的定义。 2. 在编辑或更新表单时，将后端返回的数据（通常是 ID）转换为...
Element UI框架中巧用树选择器的实现
10-17
本文将详细讲解如何在Element UI框架中实现树选择器。 首先，我们需要理解基本的HTML结构。在示例代码中，我们可以看到一个`<el-select>`元素，它是一个多选的选择器，通过`v-model`与数据模型`dataArr`进行双向...
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
在Vue Element UI中，`Select`组件是一个常用的下拉选择器，...通过以上步骤，我们就成功地实现了Vue Element中的分组、多选和搜索功能的`Select`选择器。这个示例对于需要类似功能的开发者来说，具有很高的参考价值。
vue element ui 时间选择器设置
01-07
需求：设置时间选择器,只能选择2018-01-01之后切小于当前时间的数据 data() { return { pickerOptions0: { disabledDate: time => { // 使用2018年的毫秒时间戳判断 return time.getTime() Date.now(); } ...
Vue实现购物车功能
Mpnet的博客
09-17 958
2使用JS方法获取所有的button元素，为其绑定点击事件，然后其中为偶数的的button添加判断条件，当其绑定的商品数量为1时，按钮的disable属性为true，每次点击的时候就触发一次，仅作用于当前按钮。2不需要获取所有的button元素并为偶数的添加判断条件，只需要将其判断传递的参数是否为"-"符号，以及button所在行的数量是否为1即可。同时挑选出所有的标签元素，选择为偶数的元素，为其添加判断该条件，当该行所在的商品数量为1时，减按钮失效。同时，商品的总价应发生变化。一个变量来记录商品总价格。
Vue ElementUi纯table组件实现购物车全选，结算
qq_45030898的博客
02-23 3848
Vue ElementUi纯table组件实现购物车结算1.最终效果二级目录三级目录 1.最终效果 quaa 二级目录 三级目录
Vue 实现商品分类、列表、详情、购物车、搜索（vant）
且看烟高云低处 远眸尽过满落辰
01-22 7271
商品分类Classify： <template> <div> <div style="display: flex;"> <div class="oneNav"> <!-- vant侧边导航 --> <van-sidebar style="height: 617px; white-space: nowrap; overflow-y: scroll;" v-model="activeKey">
vue - 实现购物车分类商品的单选和多选
sunshime的博客
03-05 1791
  今天用了一下空闲时间来实现了购物车部分商品的单选和多选，下面来个案例供大家参考： 效果图： 案例代码如下： <template> <div class="text"> <div class v-for="(item,index) in dataList" :key="index"> <div class="yesterday"&...
【精讲】vue框架 利用脚手架实现购物车（含添加、删除、存储、清空数据、全选or单选、tap栏切换）内含详细注释
m0_59505309的博客
08-09 1389
【精讲】vue框架 利用脚手架实现购物车（含添加、删除、存储、清空数据、全选or单选、tap栏切换）内含详细注释
elementUI -->实现简单的购物车
weixin_30784945的博客
08-29 1591
<template> <div class="bbb"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleAllChange">全选</el-checkbox> <div s...
用vue + element ui 实现购物车
m0_46598424的博客
10-11 4189
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购.
Vue-elementUI实现PC端商城购物车计算
qq_38541936的博客
06-15 3173
Vue-elementUI实现PC端商城购物车计算 Vue-elementUI实现PC端商城购物车计算，最重要的就是【computed】里面的计算，用来算出勾选的商品的总价 文章目录Vue-elementUI实现PC端商城购物车计算前言一、实现效果二、使用步骤1.数据结构部分2.HTML部分3.部分CSS样式4.JS中的data5.JS中的method6.JS中的computed（计算最终勾选的价格）总结 前言 商城购物车价格计算也算是商城里面比较重要的一部分了，主要就是勾选的哪些商品，商品的数量加减
由elemnent-ui模拟一个全选、反选效果想到的购物车逻辑案例
baidu_41601048的博客
01-20 837
最近做一个小例子，主要是要实现一个类似淘宝购物车那种效果。主要的功能点有如下几点： 1最顶层的复选框，实现全选、全不选 2每个商家店铺前有一个复选框，实现全选（该店铺下的商品）全选、全不选 3 每个商家店铺里的商品在勾选的时候，逐一勾选直到全部勾选，当前商家店铺前的复选框会勾选，当此操作依次进行，所有商家店铺前的复选框都勾选时，最顶层的复选框实现全选，反之状态变更为- 再测试这个例子之前，官方的demo过于简单，所以对element-ui的checkbox、<el-checkb...
vue实现完整的购物车功能(包括单选全选，删除商品和结算商品功能)
热门推荐
YanGo的博客
06-03 2万+
首先来看看效果图 预览地址：http://xy.xxiaoyuan.top/demo/shopCart/#/ 项目开始之前需要选安装好node跟vue和vue-cli 如果还没安装的可以看这里（mac环境下的）https://blog.csdn.net/weixin_39644462/article/details/86302579 1. 首先创建一个vue项目(命令行如下) ...
element实现下拉选择器支持全选
最新发布
07-14
### 回答1： element是一种常见的前端开发框架，用于构建用户界面。下拉选择器是element框架中的一个常用...综上所述，我们可以通过自定义下拉选择器+全选按钮+联动逻辑，来实现element框架下拉选择器支持全选的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值