溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.安裝vuecli腳手架
2.終端輸入
cnpm i element-ui -S
安裝element-ui
3.按需引入select組件
在main.js中寫入如下代碼
/* 導入第三方庫開始 */
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);
// 或寫為Vue.use(Button)
/* 導入第三方庫結束 */
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="請選擇" @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: '選項1',
label: '黃金糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}],
value: '',
dialogVisible: false,
selVal : ''
}
},
methods: {
currentSel(selVal){
this.selVal = selVal;
this.dialogVisible = true;
}
}
}
</script>
拓展知識：element-ui 點擊編輯彈出dialog組件中select組件綁定值改變,但是不觸發change事件的方法
代碼結構如下：
現象視頻如下：
現象原因：經過排查發現 此時點擊操作不觸發chang事件，后臺響應數據中沒有訂單取消原因orderCanleRemark字段，此時導致不觸發change事件，
解決方案：
方案1：讓后臺配合響應該字段，無論是否為空都響應該字段
方案2：在后臺響應數據賦值給，this.form之前，手動添加該字段到后臺響應數據中
代碼如下：
以上這篇element-ui中select組件綁定值改變,觸發change事件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
