1.安裝vuecli腳手架
從網(wǎng)站建設(shè)到定制行業(yè)解決方案,為提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù)體系,各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案,助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐,提供優(yōu)質(zhì)的建站服務(wù)。
2.終端輸入
cnpm i element-ui -S
安裝element-ui
3.按需引入select組件
在main.js中寫入如下代碼
/* 導(dǎo)入第三方庫開始 */ 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)入第三方庫結(jié)束 */
HelloWorld.vue代碼
{{selVal}}
拓展知識:element-ui 點(diǎn)擊編輯彈出dialog組件中select組件綁定值改變,但是不觸發(fā)change事件的方法
代碼結(jié)構(gòu)如下:
現(xiàn)象視頻如下:
現(xiàn)象原因:經(jīng)過排查發(fā)現(xiàn) 此時(shí)點(diǎn)擊操作不觸發(fā)chang事件,后臺響應(yīng)數(shù)據(jù)中沒有訂單取消原因orderCanleRemark字段,此時(shí)導(dǎo)致不觸發(fā)change事件,
解決方案:
方案1:讓后臺配合響應(yīng)該字段,無論是否為空都響應(yīng)該字段
方案2:在后臺響應(yīng)數(shù)據(jù)賦值給,this.form之前,手動添加該字段到后臺響應(yīng)數(shù)據(jù)中
代碼如下:
以上這篇element-ui中select組件綁定值改變,觸發(fā)change事件方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。