vue和element ui 下拉框select的change事件

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=znebqj...

李国伟_2245

16807人浏览 · 2018-06-19 17:31:42

李国伟_2245 · 2018-06-19 17:31:42 发布

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

<div id="app">
<button type="button" class="add-btn btn btn-primary" @click="add">新增</button>
<table class="table table-bordered">
<thead>
<tr>
<th width="100px"></th><th></th><th></th>
<th></th><th></th><th></th>
<th></th><th></th>
</tr>
</thead>
<tbody>
<tr v-for="(item, itemIndex) in items">
<td>
<select v-model="selected" class="form-control" @change="onSelectedDrug($event, item)">
<option value="" disabled selected>空</option>
<option :value="drug" v-for="drug in drugs">{{ drug.name }}</option>
</select>
</td>
<td><input type="text" class="form-control" placeholder="use" v-model="item.use"></td>
<td><input type="text" class="form-control" placeholder="unit" :value="getDrug(item.drug_id).unit" disabled></td>
<td><input type="text" class="form-control" placeholder="rate" v-model="item.rate"></td>
<td><input type="text" class="form-control" placeholder="amount" :value="item.amount" @input="onItemAmountInput($event, item)"></td>
<td><input type="text" class="form-control" placeholder="price" disabled :value="getDrug(item.drug_id).price"></td>
<td><input type="text" class="form-control" placeholder="money" :value="item.money" disabled></td>
<td><button type="button" class="btn btn-danger" @click="remove(itemIndex)">刪除</button></td>
</tr>
<tr v-if="!items.length">
<td colspan="8" class="empty">尚未新增任何資料</td>
</tr>
<tr>
<td colspan="8" class="right">總金額：{{ totalMoney }}</td>
</tr>
</tbody>
</table>
<hr>
<p>
<pre>
{{$data|json}}
</pre>
</p>
</div>

2.2 js部分

[html] view plain copy

new Vue({
el: '#app',
data() {
return {
selected: null,
items: [],
// 按照系統正常流程，這邊藥物應該是有個編號值的
// 而且為了統一性，保持資料單一來源也是很重要的
// item 就記住他用了哪個藥物的 id ，再從這裡取得是最保險的做法
drugs: [
{ id: 1, name: 'A藥物', unit: '個', 'price': 5},
{ id: 2, name: 'B藥物', unit: '條', 'price': 6},
{ id: 3, name: 'C藥物', unit: '坨', 'price': 7},
{ id: 4, name: 'D藥物', unit: '顆', 'price': 8},
],
totalMoney: 0
}
},
methods: {
add() {
this.items.push({
drug_id: null,
use: '',
rate: '',
amount: '',
money: 0,
})
},
// 取得藥物
getDrug(drugId) {
if(!drugId) return ""
// 透過 id 取得
return this.drugs.find( d => d.id === drugId)
},
// 計算金額
calculateMoney(item) {
const drug = this.getDrug(item.drug_id)
// 照你的算法～
let money = (parseFloat(drug.price) * parseFloat(item.amount)).toFixed(2)
// 這裡可以簡化成這樣
item.money = isNaN(money) ? parseFloat(0.00) : money
// 任何金額異動就重新計算總金額
this.calculateTotalMoney()
},
// 計算總金額
calculateTotalMoney() {
// 這裡的大致意思是說，從 items 每個元素中取得其 money 值，在進行加總 (reduce)
this.totalMoney = parseFloat(this.items.map( i => parseFloat(i.money)).reduce( (a, b) => (a + b), 0)).toFixed(2)
},
// 選擇藥物時
onSelectedDrug(event,item) {
//打印出绑定的对象
console.log(this.selected.id+""+this.selected.name+""+this.selected.price);
item.drug_id = parseInt(event.target.value)
this.calculateMoney(item)
},
onItemAmountInput(event, item) {
const amount = parseFloat(event.target.value)
// 一樣就不繼續了
if(item.amount === amount) return
// 檢測輸入的是否為數字
if(this.isNumeric(event.target.value)) {
item.amount = amount
// 計算金額
this.calculateMoney(item)
} else {
item.amount = 0
}
},
remove(itemIndex) {
// 刪除
this.items.splice(itemIndex, 1)
// 重新計算總金額
this.calculateTotalMoney()
},
// 簡易的判斷是否為數字的 func
isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
}
})

2.3 css部分

[html] view plain copy

body {
padding: 30px;
}
.add-btn {
margin-bottom: 10px;
}
.right {
text-align: right;
}
.empty {
text-align: center;
font-size: 20px;
color: #e2e2e2;
}

2.4 结果展示

3 element 的下拉框事件

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

[html] view plain copy

// 1 html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.2/lib/index.js"></script>
<div id="app">
<template>
<el-select v-model="value" placeholder="请选择" @change="getValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
</el-option>
</el-select>
</template>
</div>
// 2 js
var Main = {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
methods:{
getValue : function(value){
alert(value.value)
alert(value.label)
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
// 3 css
@import url("//unpkg.com/element-ui@1.4.2/lib/theme-default/index.css");

3.2 代码结果

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^