cnpm i element-ui -S

/* 導(dǎo)入第三方庫(kù)開始 */
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é)束 */

<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>