vue3 elementUI 关于el-dialog组件中el-form初始值设置问题以及el-dialog懒加载变即加载解决方案

在Vue 3和Element UI中，如果你想设置el-dialog中的el-form的初始值，并且el-dialog是懒加载的，你可以通过以下方式实现：

1. 使用v-model绑定对话框的显示状态。
2. 使用ref来引用el-form组件。
3. 在需要设置初始值的时候，通过ref来设置表单的数据。

以下是一个简单的例子：

<template>
  <el-dialog
    :visible="dialogVisible"
    @open="handleDialogOpen"
    title="表单对话框"
  >
    <el-form ref="formRef" :model="form">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const dialogVisible = ref(false);
const formRef = ref(null);
const form = ref({
  username: '',
  // 其他字段的初始值
});
 
// 显示对话框
function showDialog() {
  dialogVisible.value = true;
}
 
// 对话框打开的回调
function handleDialogOpen() {
  ElMessageBox.confirm('是否需要重新加载初始值?', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'info'
  }).then(() => {
    // 假设这里从服务器获取初始值
    form.value.username = '新用户名';
    // 设置其他字段的初始值...
  }).catch(() => {
    // 用户选择不重新加载初始值
  });
}
 
// 设置初始值的方法，可以在需要的时候调用
function setInitialFormValues() {
  form.value.username = '初始用户名';
  // 设置其他字段的初始值...
}
</script>

在这个例子中，当对话框打开时（即@open事件触发时），我们通过ElMessageBox.confirm来询问用户是否需要重新加载初始值。用户确认后，我们通过修改form的响应式引用来设置表单的初始值。如果用户取消，对话框将保持当前的表单值。这里的form和formRef都是响应式引用，确保表单和对话框状态的同步更新。