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

前端之家收集整理的这篇文章主要介绍了vue+ElementUI实现订单页动态添加产品数据效果实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

效果图:

这里写图片描述

这里写图片描述

<Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 订单<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>
<el-dialog title="产品库" v-model="dialogTableVisible">
<el-table :data="list">
<el-table-column property="name" label="产品名称" width="150">
<el-table-column property="price" label="单价" width="200">
<el-table-column :context="_self" inline-template label="操作">

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

删除">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章