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

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

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

效果图：

rush:xhtml;"> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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

删除">

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

原文地址：https://www.jb51.cc/elementui/37890.html