这两天学习了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">
订单页面
<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-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">