element-ui中select元件繫結值改變,觸發change事件
阿新 • • 發佈:2019-02-04
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>