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

咕之

已于 2024-07-19 16:37:53 修改

阅读量455

点赞数 9

分类专栏：前端文章标签： vue.js 前端 elementui

于 2024-07-19 16:36:49 首次发布

本文链接：https://blog.csdn.net/a171788100/article/details/140553520

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

GitGee：咕之 / vue3 · GitCode

效果

点击按钮

代码实现

页面部分

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

引用部分

import { h, ref } from 'vue'
import { ElMessageBox, ElOption, ElSelect } from 'element-plus'

数据部分

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

函数部分

const open = () => {

		ElMessageBox({
			title: '请选择想购买的水果',
			message: () =>
				h(ElSelect, {
					style: "width: 240px",
					modelValue: select.value,
					'onUpdate:modelValue': (value : any) => {
						select.value = value
					},
				}, () =>
					optionList.value?.map(item => {
						return h(ElOption, { label: item.label, value: item.value });
					})
				),
				showCancelButton: true,
				closeOnClickModal: false,
				confirmButtonText: '确定',
				cancelButtonText: '取消'
		}).then(_ => {
          console.log("选择的是"+select.value)
        }).catch(_ =>{
			console.log("取消")
		})
	}