vue+ElementUI实现订单页动态添加产品效果

最新推荐文章于 2024-07-01 18:30:27 发布
最新推荐文章于 2024-07-01 18:30:27 发布
阅读量3w 收藏 15
点赞数
分类专栏： web开发 文章标签： vue elementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/henuboy/article/details/53395994
版权

使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果，并自动计算总价。代码直接保存为html文档，使用浏览器打开即可查看效果。
效果图：这里写图片描述
这里写图片描述

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <!-- 引入element样式 -->
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
       <title>订单页面</title>
    </head>
    <body>
        <div id="orderTest">



            <el-dialog title="产品库" v-model="dialogTableVisible">
              <el-table :data="list">
                <el-table-column property="name" label="产品名称" width="150"></el-table-column>
                <el-table-column property="price" label="单价" width="200"></el-table-column>
                <el-table-column :context="_self" inline-template label="操作">
                  <div>
                    <el-button
                      size="small"
                      @click="choise(row)">
                      选择
                    </el-button>
                  </div>
                </el-table-column>
              </el-table>
            </el-dialog>

            <el-button type="info" icon="view" @click="dialogTableVisible = true">选择产品</el-button>
            <span v-show="checkedNames.length>0" style="font-family: Microsoft YaHei">总价：{{sumPrice}}元</span>
            <el-table :data="checkedNames" v-show="checkedNames.length>0">
                <el-table-column property="name" label="产品名称" width="150"></el-table-column>
                <el-table-column property="price" label="单价" width="200"></el-table-column>
                <el-table-column inline-template label="数量" width="200">
                    <el-input-number  v-model="row.num" :min="1" :max="10"></el-input-number>
                </el-table-column>
                <el-table-column :context="_self" inline-template label="操作">
                    <i class="el-icon-circle-cross" @click="del(row)" title="删除"></i>
                </el-table-column>
            </el-table>


        </div>
    </body>
<!-- 引入vue -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- 引入element JS -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
        <script type="text/javascript">
            var order = new Vue({
                    el: '#orderTest',
                    data: {
                        dialogTableVisible:false,
                        checkedNames: [],
                        list:[
                                {name:"iphone7",price:5688,num:1},
                                {name:"荣耀8",price:2299,num:1},
                                {name:"Lumia830",price:1299,num:1}
                             ]
                    },
                    computed:{
                        sumPrice:function(){
                            var sum = 0 ;
                            for(var i=0;i< this.checkedNames.length;i++){
                                sum+=this.checkedNames[i].price*this.checkedNames[i].num;
                                }
                            return sum;
                            }
                        },
                    methods:{
                        choise:function(p){
                           order.checkedNames.push(p);
                        },
                        del:function(p){
                            order.checkedNames.splice($.inArray(p, order.checkedNames), 1);
                        },
                    }
                });
        </script>

</html>
GavinWGQ
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element实现商品多规格的添加(sku)
haibo1101的博客
04-02 9434
商品多规格的添加 当时我也是初入前端这个行业，去得第一家公司写的这个功能，但是公司里我待的那个部门只有我一个前端，所以只要是前端的东西只能我来改，没法办法，就算是不符合初级前端能写出来的东西也得硬着头皮去写。也很感谢那段时光，让人快速的成长，学到不少东西。 拿到这个需求，我当时考虑到的因素。 商品规格走的数据格式 对接后端接口的时候传的参数格式 样式怎么实现方便我去操作数据 好吧，当时想了这么多都是问了一个大哥给到的意见，算了算，写了三四次才把前端生成的数据格式给定下来。当时也是参考了以为大佬的
前端学习之vue+element-ui电商项目（八）商品信息添加
CathyleeQ的博客
03-25 3124
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现4.搜索与添加4.1 界面样式4.2 数据添加4.3 方法实现5.搜索与添加5.1 界面样式5.2 数据添加5.3 方法实现6.搜索与添加6.1 界面样式6.2 数据添加6.3 方法实现7.搜索与添加7.1 界面样式7.2 数据添加7.3 方法实现 0. 准备工作 component下新建文件夹powe
vue 添加商品多规格
han_0111的博客
07-24 1574
vue + element plus 添加商品多规格
Vue 结合 Element-UI ，管理系统快速生成指南（一）
最新发布
舜意的博客
07-01 1034
本文将详细介绍如何使用 Vue.js 和 Element UI 快速构建页面，希望对你有帮助！！！！
Vue+Element+设置商品规格SKU
不同场景下的水平居中
12-29 5499
规格效果图： 实现思路：设置商品规格 填写商品规格后，会得到规格名 privateSpecName 和规格值 dynamicTags。如： this.privateGoodsItem = [ { privateSpecName:'颜色', dynamicTags:['红','蓝'] }, { privateSpecName:'尺寸', dynamicTags:['12'] }, { privateSpecName:'面料', dyna
vue新增商品或者参数或者规格
蓦然回首，那人却在，灯火阑珊处。
02-02 625
vue新增商品或者参数或者规格
vue+ElementUI实现订单页动态添加产品数据效果实例代码
01-19
使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果，并自动计算总价。代码直接保存为html文档，使用浏览器打开即可查看效果。 效果图：   <html> <head&gt...
基于vue+ElementUI易购商城系统的设计与实现
03-19
### 基于vue+ElementUI易购商城系统的设计与实现 #### 一、引言 随着信息技术的快速发展，特别是互联网技术的日新月异，电子商务已成为人们日常生活不可或缺的一部分。传统的人工管理方式在处理大量数据时显得...
vue+elementUI实现自定义表单模板组件（一）
weixin_43930421的博客
05-30 4252
前言 如下图，实现一个可以自定义的表单。本文以实现思路为主，并未提供完整代码。 思路 1、页面布局为左中右布局：左边显示可以定义的表单控件，中间显示预览效果，右边则为选中某个控件后可以编辑的属性。如下图，先择单选项后，可以编辑选项。 2、使用 vuedraggable 拖拽组件，直接拖动左边的控件到中间生成表单。vuedraggable 文档可查阅： https://github.com/SortableJS/Vue.Draggable （你也可以不使用该组件，直接利用点击事件，点击左边控件后在中间生成
vue+element仿淘宝项目
06-17
淘宝项目需要考虑不同设备的显示效果，使用Element UI的栅格系统和Vue的媒体查询可以轻松实现响应式布局。 9. **性能优化** 使用Vue的懒加载、预加载策略来优化代码体积，提高页面加载速度。还可以通过异步组件、...
利用ElementUI配置商品的规格参数
不负好时光
12-01 1318
商品有不同的规格组合，自动生成对应规格的所有组合，并设置该规格的图片、价格、库存数据。
ddvuecomponent订单来了的Vue公共组件库
08-10
dd-vue-component：订单来了的Vue公共组件库
vue实现带规格商品的表格编辑
weixin_30662011的博客
09-02 1248
实现效果: 需求分析: 商品分为 启用规格 和 未启用规格 两种状态, 启用时显示带规格表格, 不启用时显示无规格价格 规格大项最多添加两个, 比如 "颜色", "尺寸", 规格小项可添加多个比如"颜色"下可添加"红色"、"蓝色", 尺寸下可添加"大码"、"小码"等 规格大项或规格小项可删除 启用规格时有"批量填写"项, 作为新项添加时的默认价格 添加...
【VUE项目实战】51、商品添加功能（一）
程序猿之洞
05-22 3332
接上篇《50、商品列表分页、查询和删除效果》 上一篇我们完成了商品列表的分页、查询以及删除效果，本篇我们来完成商品的添加功能 一、商品添加跳转效果实现 我们要实现点击页面的“添加商品”按钮，跳转到添加商品的页面，如下： 首先我们先给添加商品按钮增加一个点击事件，函数名为“goAddpage”，用于跳转页面： <el-col :span="4"> <el-button type="primary" @click="goAddpage()">添加商品</el-but..
1-3.vue+element-ui实现简单的增加操作
落叶的博客
02-17 1279
Vue增加表格数据 这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020 1.首先在<template>标签中写好增加数据的模板。这里用到了element-ui组件库中的Dialog...
vue后台商品管理 添加规格 属性sku
qq_43617532的博客
06-03 2554
** 商品 后台 添加规格 属性 ** vue 加 element-ui //这里使用的表格组件 <el-table :data="addForm.tableData" border style="width: 80%"> <el-table-column fixed prop="name" label="规格" align="center"> </el-table-column>
vue3+element-puls 实现商品sku
m0_65629667的博客
05-27 4485
只要是做电商类相关的产品，比如购物 APP、购物网站等等，都会遇到这么一个场景，每个商品对应着多个规格，用户可以根据不同的规格组合，选择出自己想要的产品。我们自己在生活中也会经常用到这个功能。
vue+Element plus实现商品规格练习（sku列表）
m0_71933813的博客
04-22 1273
6.点击“刷新”按钮，对上面的规格进行组合，得到表格数据。4.点击“添加规格值”按钮，添加一组规格值内容。2.点击“添加规格”按钮，添加一组规格内容。5.点击“x”按钮，删除该规格值内容。3.点击“x”按钮，删除该规格内容。7.最多添加3组规格内容。
一文教你如何用Vue.js和Element UI实现商品管理，提升工作效率！
专注java二开部署
12-21 638
【代码】一文教你如何用Vue.js和Element UI实现商品管理，提升工作效率！
使用vue+elementui实现 顶部导航栏并实现动态路由
05-03
首先，你需要安装Vue和ElementUI，可以通过以下命令进行安装： ```bash npm install vue element-ui --save ``` 然后在你的Vue项目中引入ElementUI和Vue Router，并创建一个顶部导航栏组件。这个组件将包含一个菜单和一个路由视图。 ```html <template> <div> <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="/">首页</el-menu-item> <el-submenu index="/products"> <template slot="title">产品</template> <el-menu-item index="/products/list">产品列表</el-menu-item> <el-menu-item index="/products/add">添加产品</el-menu-item> </el-submenu> <el-submenu index="/orders"> <template slot="title">订单</template> <el-menu-item index="/orders/list">订单列表</el-menu-item> <el-menu-item index="/orders/add">添加订单</el-menu-item> </el-submenu> </el-menu> <router-view></router-view> </div> </template> <script> import { mapState } from 'vuex'; export default { computed: { ...mapState(['user']) }, methods: { handleSelect(key, keyPath) { this.$router.push(key); } } }; </script> <style scoped> .el-menu-demo { margin-bottom: 20px; } </style> ``` 在这个组件中，我们使用了ElementUI的`el-menu`组件来创建菜单，并使用Vue Router的`$route.path`来设置默认选项。我们还使用了Vue Router的`router-view`组件来显示当前路由的内容。 接下来，我们需要定义路由和组件。我们可以在Vue Router的配置中定义路由，如下所示： ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const HomePage = () => import('@/views/HomePage.vue'); const ProductListPage = () => import('@/views/ProductListPage.vue'); const ProductAddPage = () => import('@/views/ProductAddPage.vue'); const OrderListPage = () => import('@/views/OrderListPage.vue'); const OrderAddPage = () => import('@/views/OrderAddPage.vue'); export default new Router({ mode: 'history', routes: [ { path: '/', component: HomePage }, { path: '/products/list', component: ProductListPage }, { path: '/products/add', component: ProductAddPage }, { path: '/orders/list', component: OrderListPage }, { path: '/orders/add', component: OrderAddPage } ] }); ``` 在这个配置中，我们定义了五个路由和对应的组件。我们还使用了Vue Router的`mode: 'history'`来启用HTML5历史记录模式。 最后，我们需要在Vue项目中引入并使用Vue Router和顶部导航栏组件。我们可以在Vue实例中定义Vue Router，并在Vue模板中使用顶部导航栏组件，如下所示： ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount('#app'); ``` ```html <template> <div id="app"> <top-nav /> </div> </template> <script> import TopNav from '@/components/TopNav.vue'; export default { components: { TopNav } }; </script> ``` 现在，你已经成功地使用Vue和ElementUI创建了一个顶部导航栏，并实现了动态路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值