1 在线编辑测试工具

 https://jsfiddle.net/api/post/library/pure/

编辑好代码后点击 run 即可

 2 vue原生写法

 

2.1 html部分

https://jsfiddle.net/znebqjvL/1/?utm_source=website&utm_medium=embed&utm_campaign=znebqjvL

 

[html] view plain copy

1. <div id="app">  
2.     <button type="button" class="add-btn btn btn-primary" @click="add">新增</button>  
3.     <table class="table table-bordered">  
4.         <thead>  
5.             <tr>  
6.                 <th width="100px"></th><th></th><th></th>  
7.                 <th></th><th></th><th></th>  
8.                 <th></th><th></th>  
9.             </tr>  
10.         </thead>  
11.         <tbody>  
12.             <tr v-for="(item, itemIndex) in items">  
13.                 <td>  
14.                     <select v-model="selected" class="form-control" @change="onSelectedDrug($event, item)">  
15.                         <option value="" disabled selected>空</option>  
16.                         <option :value="drug" v-for="drug in drugs">{{ drug.name }}</option>  
17.                     </select>  
18.                 </td>  
19.                 <td><input type="text" class="form-control" placeholder="use" v-model="item.use"></td>  
20.                 <td><input type="text" class="form-control" placeholder="unit" :value="getDrug(item.drug_id).unit" disabled></td>  
21.                 <td><input type="text" class="form-control" placeholder="rate" v-model="item.rate"></td>  
22.                 <td><input type="text" class="form-control" placeholder="amount" :value="item.amount" @input="onItemAmountInput($event, item)"></td>  
23.                 <td><input type="text" class="form-control" placeholder="price" disabled :value="getDrug(item.drug_id).price"></td>  
24.                 <td><input type="text" class="form-control" placeholder="money" :value="item.money" disabled></td>  
25.                 <td><button type="button" class="btn btn-danger" @click="remove(itemIndex)">刪除</button></td>  
26.             </tr>  
27.             <tr v-if="!items.length">  
28.                 <td colspan="8" class="empty">尚未新增任何資料</td>  
29.             </tr>  
30.             <tr>  
31.                 <td colspan="8" class="right">總金額：{{ totalMoney }}</td>  
32.             </tr>  
33.         </tbody>  
34.     </table>  
35. <hr>  
36. <p>  
37. <pre>  
38. {{$data|json}}  
39. </pre>  
40. </p>  
41. </div>  

 

 

2.2 js部分

 

[html] view plain copy

1. new Vue({  
2.     el: '#app',  
3.     data() {  
4.         return {  
5.             selected: null,  
6.             items: [],  
7.             // 按照系統正常流程，這邊藥物應該是有個編號值的  
8.             // 而且為了統一性，保持資料單一來源也是很重要的  
9.             // item 就記住他用了哪個藥物的 id ，再從這裡取得是最保險的做法  
10.             drugs: [  
11.                 { id: 1, name: 'A藥物', unit: '個', 'price': 5},  
12.                 { id: 2, name: 'B藥物', unit: '條', 'price': 6},  
13.                 { id: 3, name: 'C藥物', unit: '坨', 'price': 7},  
14.                 { id: 4, name: 'D藥物', unit: '顆', 'price': 8},  
15.             ],  
16.             totalMoney: 0  
17.         }  
18.     },  
19.     methods: {  
20.         add() {  
21.             this.items.push({  
22.                 drug_id: null,  
23.                 use: '',  
24.                 rate: '',  
25.                 amount: '',  
26.                 money: 0,  
27.             })  
28.         },  
29.         // 取得藥物  
30.         getDrug(drugId) {  
31.             if(!drugId) return ""  
32.             // 透過 id 取得  
33.             return this.drugs.find( d => d.id === drugId)  
34.         },  
35.         // 計算金額  
36.         calculateMoney(item) {  
37.             const drug = this.getDrug(item.drug_id)  
38.             // 照你的算法～  
39.             let money = (parseFloat(drug.price) * parseFloat(item.amount)).toFixed(2)  
40.             // 這裡可以簡化成這樣  
41.             item.money = isNaN(money) ? parseFloat(0.00) : money  
42.             // 任何金額異動就重新計算總金額  
43.             this.calculateTotalMoney()  
44.         },  
45.         // 計算總金額  
46.         calculateTotalMoney() {  
47.             // 這裡的大致意思是說，從 items 每個元素中取得其 money 值，在進行加總 (reduce)  
48.             this.totalMoney = parseFloat(this.items.map( i => parseFloat(i.money)).reduce( (a, b) => (a + b), 0)).toFixed(2)  
49.         },  
50.         // 選擇藥物時  
51.         onSelectedDrug(event,item) {  
52. //打印出绑定的对象  
53.             console.log(this.selected.id+""+this.selected.name+""+this.selected.price);  
54.             item.drug_id = parseInt(event.target.value)   
55.           this.calculateMoney(item)  
56.         },  
57.         onItemAmountInput(event, item) {  
58.             const amount = parseFloat(event.target.value)  
59.             // 一樣就不繼續了  
60.             if(item.amount === amount) return  
61.             // 檢測輸入的是否為數字  
62.             if(this.isNumeric(event.target.value)) {  
63.                 item.amount = amount  
64.                 // 計算金額  
65.                 this.calculateMoney(item)  
66.             } else {  
67.                 item.amount = 0  
68.             }  
69.         },  
70.         remove(itemIndex) {  
71.             // 刪除  
72.             this.items.splice(itemIndex, 1)  
73.             // 重新計算總金額  
74.             this.calculateTotalMoney()  
75.         },  
76.         // 簡易的判斷是否為數字的 func  
77.         isNumeric(n) {  
78.           return !isNaN(parseFloat(n)) && isFinite(n);  
79.         }  
80.     }  
81. })  

2.3 css部分

 

 

[html] view plain copy

1. body {  
2.     padding: 30px;  
3. }  
4.   
5. .add-btn {  
6.     margin-bottom: 10px;  
7. }  
8.   
9. .right {  
10.     text-align: right;  
11. }  
12.   
13. .empty {  
14.     text-align: center;  
15.     font-size: 20px;  
16.     color: #e2e2e2;  
17. }  

2.4 结果展示

 

 

3 element 的下拉框事件

      Element 是一套 Vue.js 后台组件库,地址http://element.eleme.io/

 

[html] view plain copy

1. // 1 html  
2. <script src="//unpkg.com/vue/dist/vue.js"></script>  
3. <script src="//unpkg.com/element-ui@1.4.2/lib/index.js"></script>  
4. <div id="app">  
5. <template>  
6.   <el-select v-model="value"  placeholder="请选择" @change="getValue">  
7.     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">  
8.     </el-option>  
9.   </el-select>  
10. </template>  
11. </div>  
12.   
13. // 2 js  
14.   
15. var Main = {  
16.     data() {  
17.       return {  
18.         options: [{  
19.           value: '选项1',  
20.           label: '黄金糕'  
21.         }, {  
22.           value: '选项2',  
23.           label: '双皮奶'  
24.         }, {  
25.           value: '选项3',  
26.           label: '蚵仔煎'  
27.         }, {  
28.           value: '选项4',  
29.           label: '龙须面'  
30.         }, {  
31.           value: '选项5',  
32.           label: '北京烤鸭'  
33.         }],  
34.         value: ''  
35.       }  
36.     },  
37.     methods:{  
38.     getValue : function(value){  
39.     alert(value.value)  
40.     alert(value.label)  
41.     }  
42.     }  
43.   }  
44. var Ctor = Vue.extend(Main)  
45. new Ctor().$mount('#app')  
46.   
47. // 3 css  
48.   
49. @import url("//unpkg.com/element-ui@1.4.2/lib/theme-default/index.css");  

 

 

3.2 代码结果