element-plus form数据回显

在Element Plus中，可以使用表单组件来实现数据回显。具体步骤如下：

1. 首先，需要在Vue组件中引入Element Plus的Form组件和FormItem组件。

import { Form, FormItem } from 'element-plus';

2. 在Vue组件的template中，使用Form和FormItem组件来构建表单。

<template>
  <Form :model="formData" :rules="formRules" ref="form">
    <FormItem label="姓名" prop="name">
      <input v-model="formData.name" />
    </FormItem>
    <FormItem label="年龄" prop="age">
      <input v-model="formData.age" />
    </FormItem>
    <!-- 其他表单项 -->
  </Form>
</template>

3. 在Vue组件的script中，定义formData对象来存储表单数据，并设置formRules对象来定义表单验证规则。

export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        // 其他表单项
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        // 其他表单项的验证规则
      }
    };
  },
  // 其他组件代码
}

4. 当需要进行数据回显时，可以通过给formData对象赋值来实现。

this.formData = {
  name: 'John',
  age: 25,
  // 其他表单项的值
};

5. 如果需要重置表单数据，可以使用Form组件的resetFields方法。

this.$refs.form.resetFields();

这样，就可以实现Element Plus表单数据的回显了。