element-ui中select組件綁定值改變,觸發(fā)change事件方法
1.安裝vuecli腳手架
2.終端輸入
cnpm i element-ui -S
安裝element-ui
3.按需引入select組件
在main.js中寫(xiě)入如下代碼
/* 導(dǎo)入第三方庫(kù)開(kāi)始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加載Select組件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option) Vue.use(Dialog) Vue.use(Button) // Vue.component(Select.name,Select); // 或?qū)憺閂ue.use(Button) /* 導(dǎo)入第三方庫(kù)結(jié)束 */
HelloWorld.vue代碼
<template> <div> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>{{selVal}}</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">確 定</el-button> </span> </el-dialog> <el-select v-model="value" multiple placeholder="請(qǐng)選擇" @change="currentSel"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"> </el-option> </el-select> </div> </template> <script> export default { data() { return { options: [{ value: '選項(xiàng)1', label: '黃金糕' }, { value: '選項(xiàng)2', label: '雙皮奶' }, { value: '選項(xiàng)3', label: '蚵仔煎' }, { value: '選項(xiàng)4', label: '龍須面' }, { value: '選項(xiàng)5', label: '北京烤鴨' }], value: '', dialogVisible: false, selVal : '' } }, methods: { currentSel(selVal){ this.selVal = selVal; this.dialogVisible = true; } } } </script>
拓展知識(shí):element-ui 點(diǎn)擊編輯彈出dialog組件中select組件綁定值改變,但是不觸發(fā)change事件的方法
代碼結(jié)構(gòu)如下:
現(xiàn)象視頻如下:
現(xiàn)象原因:經(jīng)過(guò)排查發(fā)現(xiàn) 此時(shí)點(diǎn)擊操作不觸發(fā)chang事件,后臺(tái)響應(yīng)數(shù)據(jù)中沒(méi)有訂單取消原因orderCanleRemark字段,此時(shí)導(dǎo)致不觸發(fā)change事件,
解決方案:
方案1:讓后臺(tái)配合響應(yīng)該字段,無(wú)論是否為空都響應(yīng)該字段
方案2:在后臺(tái)響應(yīng)數(shù)據(jù)賦值給,this.form之前,手動(dòng)添加該字段到后臺(tái)響應(yīng)數(shù)據(jù)中
代碼如下:
以上這篇element-ui中select組件綁定值改變,觸發(fā)change事件方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用SpringMVC過(guò)濾器解決vue跨域請(qǐng)求的問(wèn)題
下面小編就為大家分享一篇利用SpringMVC過(guò)濾器解決vue跨域請(qǐng)求的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)(defineProperty表示不背這個(gè)鍋)
這篇文章主要介紹了為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)?defineProperty表示不背這個(gè)鍋,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10詳解如何使用webpack在vue項(xiàng)目中寫(xiě)jsx語(yǔ)法
本篇文章主要介紹了詳解如何使用webpack在vue項(xiàng)目中寫(xiě)jsx語(yǔ)法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11前端框架Vue父子組件數(shù)據(jù)雙向綁定的實(shí)現(xiàn)
Vue項(xiàng)目中經(jīng)常使用到組件之間的數(shù)值傳遞,實(shí)現(xiàn)的方法很多,但是原理上基本大同小異。這篇文章將給大家介紹Vue 父子組件數(shù)據(jù)單向綁定與Vue 父子組件數(shù)據(jù)雙向綁定的對(duì)比從而認(rèn)識(shí)雙向綁定2021-09-09Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問(wèn)題解決
這篇文章主要為大家詳細(xì)介紹一下Vue使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問(wèn)題的解決,需要的可以參考下2024-01-01玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)
這篇文章主要介紹了玩轉(zhuǎn)vue的slot內(nèi)容分發(fā),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09