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

来源：互联网发布：js split 二维数组编辑：程序博客网时间：2024/06/08 06:09

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

<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部分

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部分

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/

// 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 jsvar 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 代码结果

阅读全文

0 0