element-ui中select組件綁定值改變,觸發(fā)change事件方法

更新時間：2018年08月24日 09:02:03 作者：UIEngineer

今天小編就為大家分享一篇element-ui中select組件綁定值改變,觸發(fā)change事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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>