vue+ElementUI实现订单页动态添加产品数据效果实例代码


Posted in Javascript onJuly 13, 2017

这两天学习了ElementUI基于vue2.0开发学习,这个知识点挺多的,而且很重要,所以,今天添加一点小笔记。

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

效果图:

vue+ElementUI实现订单页动态添加产品数据效果实例代码 

vue+ElementUI实现订单页动态添加产品数据效果实例代码

<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" rel="external nofollow" >
  <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
node.js 动态执行脚本
Jun 02 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
Angular如何引入第三方库的方法详解
Jul 13 #Javascript
详解如何构建Angular项目目录结构
Jul 13 #Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 #Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 #Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 #Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 #Javascript
浅谈关于axios和session的一些事
Jul 13 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
php异常处理捕获错误整理
2019/09/23 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Python实现八大排序算法
2016/08/13 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python多线程的退出控制实现
2020/08/10 Python
一些关于MySql加速和优化的面试题
2014/01/30 面试题
端午节粽子促销活动方案
2014/02/02 职场文书
优秀员工获奖感言
2014/03/01 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
赤壁观后感(2)
2015/06/15 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
oracle数据库去除重复数据
2022/05/20 Oracle