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

发布时间：2020-12-17 02:53:13 所属栏目：百科来源：网络整理

导读：这两天学习了ElementUI基于vue2.0开发学习，这个知识点挺多的，而且很重要，所以，今天添加一点小笔记。使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果，并自动计算总价。代码直接保存为html文档，使用浏览器打

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

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

效果图：

这里写图片描述

订单页面

<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">

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!