Vue 和 Element Plus 弹框组件详解：从基本实现到异步数据加载与自定义内容（实战）

前言

主要是通过一个按钮触发一个按钮框，多种方式的逻辑，多种场景

原先通过实战总结，基本的知识推荐阅读：

详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）
详细分析Element中的MessageBox基本知识（附Demo）
Vue按照顺序实现多级弹窗（附Demo）
Vue以弹窗形式实现导入功能
使用 Vue 实现包含单选框的弹窗功能（附Demo）
点击按钮框来选择相应信息（Vue + Java）

此处整体文章偏向vue3的语法，对于vu2大同小异，注意语法差异即可

1. 基本知识

展示弹框内容并控制其显示是 Vue 和 Element Plus 中常见的需求

弹框组件 (el-dialog):
el-dialog 是 Element Plus 提供的对话框组件，用于弹出层展示信息
使用 v-model 或 v-model:visible 来控制对话框的显示和隐藏
可以通过插槽自定义对话框的内容和底部按钮

Vue 组件通信:
Props：父组件向子组件传递数据
Emits：子组件向父组件传递事件或数据
v-model：用于双向绑定数据

方法:

使用异步方法（async/await）获取数据
更新组件状态（如弹框的显示状态）以展示或隐藏内容

2. 模版

参照模版感受对应的需求

在最基本的实现中，可以使用 el-dialog 组件并通过 v-model 控制其显示和隐藏

组件代码 (BasicDialog.vue)

<template><div><el-button type="primary" @click="showDialog">打开对话框</el-button><el-dialogv-model:visible="dialogVisible"title="基本对话框"width="50%"><p>这是一个基本的对话框。</p><template #footer><el-button @click="dialogVisible = false">关闭</el-button></template></el-dialog></div>
</template><script setup>
import { ref } from 'vue';const dialogVisible = ref(false);const showDialog = () => {dialogVisible.value = true;
};
</script>

传递数据到对话框

<template><div><el-button type="primary" @click="showDataDialog">查看数据</el-button><el-dialogv-model:visible="dataDialogVisible"title="数据对话框"width="50%"><p>{{ dialogContent }}</p><template #footer><el-button @click="dataDialogVisible = false">关闭</el-button></template></el-dialog></div>
</template><script setup>
import { ref } from 'vue';const dataDialogVisible = ref(false);
const dialogContent = ref('这是传递的数据内容');const showDataDialog = () => {dataDialogVisible.value = true;
};
</script>

异步数据加载

通过按钮点击触发对话框显示，并从后端获取数据并显示

<template><div><el-button type="primary" @click="fetchDataAndShowDialog">获取数据并显示</el-button><el-dialogv-model:visible="asyncDialogVisible"title="异步数据对话框"width="50%"><p>{{ asyncData }}</p><template #footer><el-button @click="asyncDialogVisible = false">关闭</el-button></template></el-dialog></div>
</template><script setup>
import { ref } from 'vue';
import AppointmentCommissionApi from '@/api/AppointmentCommissionApi'; // 替换为实际路径const asyncDialogVisible = ref(false);
const asyncData = ref('');const fetchDataAndShowDialog = async () => {try {const response = await AppointmentCommissionApi.getData();asyncData.value = response.data; // 假设返回的数据在 data 字段中asyncDialogVisible.value = true;} catch (error) {console.error('数据获取失败:', error);}
};
</script>

自定义对话框内容
可以通过插槽 (slot) 自定义对话框内容，如自定义表单或详细信息展示

<template><div><el-button type="primary" @click="showCustomDialog">打开自定义对话框</el-button><el-dialogv-model:visible="customDialogVisible"title="自定义内容对话框"width="50%"><template #default><el-form :model="form"><el-form-item label="名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="描述"><el-input type="textarea" v-model="form.description"></el-input></el-form-item></el-form></template><template #footer><el-button @click="customDialogVisible = false">取消</el-button><el-button type="primary" @click="handleSubmit">提交</el-button></template></el-dialog></div>
</template><script setup>
import { ref } from 'vue';const customDialogVisible = ref(false);
const form = ref({name: '',description: ''
});const showCustomDialog = () => {customDialogVisible.value = true;
};const handleSubmit = () => {console.log('提交的表单数据:', form.value);customDialogVisible.value = false;
};
</script>

3. 实战

通过基本的知识点以及Demo模版大致知道逻辑步骤

在做审批过程中，审批不通过，客户查询后端原因，出现弹框结果

在这里插入图片描述

基本的功能组件如下：

<template><el-dialog :model-value="visible" title="不通过原因" width="50%" @close="handleClose"><p>{{ rejectionReason }}</p><template #footer><el-button @click="handleClose">关闭</el-button></template></el-dialog>
</template><script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue';const props = defineProps({modelValue: {type: Boolean,required: true},rejectionReason: {type: String,default: ''}
});const emit = defineEmits(['update:modelValue']);const visible = ref(props.modelValue);watch(() => props.modelValue, (newVal) => {visible.value = newVal;
});const handleClose = () => {emit('update:modelValue', false);
};
</script>

在父组件中使用 RejectionReasonDialog，并进行相应的弹框控制和数据处理

<template><div><!-- 查看不通过原因按钮 --><el-buttonlinktype="primary"@click="showRejectionReason(scope.row.id)"v-if="scope.row.appointmentStatus === '审批不通过'"v-hasPermi="['dangerous:appointment-commission:query']">查看原因</el-button><!-- 不通过原因对话框 --><RejectionReasonDialogv-model:modelValue="isReasonDialogVisible":rejectionReason="rejectionReason"/></div>
</template><script setup lang="ts">
import { ref } from 'vue';
import AppointmentCommissionApi from '@/api/AppointmentCommissionApi'; // 替换为实际路径
import RejectionReasonDialog from '@/components/RejectionReasonDialog.vue'; // 替换为实际路径const isReasonDialogVisible = ref(false);
const rejectionReason = ref('');const showRejectionReason = async (id: number) => {try {const response = await AppointmentCommissionApi.getAppointmentCommission(id);rejectionReason.value = response.approvalReason || '无理由'; // 确保有默认值isReasonDialogVisible.value = true; // 显示对话框} catch (error) {console.error('获取不通过原因失败:', error);}
};
</script>

基本的解释如下：

RejectionReasonDialog 组件：
使用 :model-value="visible" 绑定控制对话框的显示
使用 rejectionReason 作为对话框内容
父组件：
通过 showRejectionReason 方法调用 API 并更新 rejectionReason
通过 isReasonDialogVisible 控制对话框的显示
数据绑定：
v-model:modelValue 用于双向绑定对话框的显示状态
:rejectionReason 传递不通过原因到对话框组件