vue3 el-from表单回显

在Vue 3中，可以使用v-model指令和响应式数据来实现表单回显。以下是一个简单的示例：

<template>
  <form @submit.prevent="handleSubmit">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="formData.name" />
    
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="formData.email" />
    
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  mounted() {
    // 模拟从后端获取的表单数据
    // 将表单数据赋值给formData对象
    const responseData = {
      name: 'John Doe',
      email: 'johndoe@example.com'
    };
    this.formData = { ...responseData };
  },
  methods: {
    handleSubmit() {
      // 处理表单提交逻辑
      console.log(this.formData);
    }
  }
};
</script>

在上面的示例中，通过将表单元素的`v-model`绑定到`formData`对象的属性上，可以实现表单数据的双向绑定。在`mounted`钩子中，可以模拟从后端获取的表单数据，并将其赋值给`formData`对象。当用户修改表单数据时，`formData`对象也会相应地更新。在`handleSubmit`方法中，可以处理表单的提交逻辑，并访问最新的表单数据。

这样，当页面加载时，表单将会回显从后端获取的数据。