【vue2.0+Element】弹框嵌套选择器（messsageBox+Select）

目录

效果

代码实现

页面部分

引用部分

数据部分

函数部分

官方文档：

代码下载

GitGee：咕之 / vue2 · GitCode

---

效果

点击按钮

代码实现

页面部分

<template>
  <el-button type="primary" @click="open">点击打开 Message Box</el-button>
</template>

引用部分

import { MessageBox } from 'element-ui';
import Vue from 'vue';

数据部分

data(){
	return {
	//选项数组
	optionList:[
		{
			value:'01',label:'苹果'
		},
		{
			value:'02',label:'西瓜'
		}
	],
	//被选择的选项
	select:''
    }
}

函数部分

methods: {
		//函数
      open() {
		var _this = this;
        const h = this.$createElement;
		const optionList = this.optionList;
		
        this.$msgbox({
          title: '请选择想购买的水果',
          message: h(
			Vue.component('xxx',{
				data(){
					return {
						value: _this.select
					}
				},
				render(h){
					return h('div',null,[
						h('el-select',{
							props:{value:this.value},
							on:{
								input:(v) =>{
									this.value = v
									_this.select = v
									this.$emit('input',v)
								}
							}
						},
						[
							optionList.map(it => {
								return h('el-option',{
									props:{
										key:it.value,
										label:it.label,
										value:it.value
									},
								});
							})
						])
					])
				}
			})
		  ),
          showCancelButton: true,
		  closeOnClickModal: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(_ => {
          console.log("选择的是"+_this.select)
        }).catch(_ =>{
			console.log("取消")
		})
      }
    }

官方文档：

        Element - The world's most popular Vue UI framework

代码下载

GitGee：咕之 / vue2 · GitCode

（gitgee代码中不含node_modules）