el-form setFields

el-form 的 setFields 方法是用来设置表单字段值的。它接受一个对象作为参数，对象的 key 是表单字段名，value 是对应的值。例如：

this.$refs.form.setFields({
  name: '张三',
  age: 18,
  gender: '男'
})

这样就会将表单中的 name、age、gender 字段分别设置为 '张三'、18、'男'。

相关问题

form.setFields 方法

Ant Design Pro 的 form.setFields 方法可以直接设置表单的值，而不会触发表单的重新渲染。setFields 方法接收一个对象作为参数，对象的 key 是表单字段的名称，value 是对应的值。

示例代码如下：

import { Form } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const initialValues = {
    name: 'John',
    age: 30,
    gender: 'male',
  }

  const handleUpdate = () => {
    const newValues = {
      name: 'Jane',
      age: 25,
      gender: 'female',
    }
    form.setFields(newValues);
  }

  return (
    <Form form={form} initialValues={initialValues}>
      <Form.Item name="name" label="Name">
        <Input />
      </Form.Item>
      <Form.Item name="age" label="Age">
        <InputNumber />
      </Form.Item>
      <Form.Item name="gender" label="Gender">
        <Select>
          <Select.Option value="male">Male</Select.Option>
          <Select.Option value="female">Female</Select.Option>
        </Select>
      </Form.Item>
      <Button onClick={handleUpdate}>Update</Button>
    </Form>
  );
}

在上面的示例代码中，我们在初始化表单时设置了初始值，然后在点击 Update 按钮时调用了 handleUpdate 方法，该方法调用了 form.setFields 方法，将表单的值更新为新的值。注意，我们没有使用 setFieldsValue 方法，而是直接使用了 setFields 方法，这样可以避免触发表单的重新渲染。

form.setFields 方法的参数

`form.setFields` 方法的参数是一个对象，用于设置表单控件的值和校验状态。该对象的键名为字段名称，键值为一个对象，包含以下属性：

- `value`：表单控件的值，可以为任意类型。
- `errors`：表单控件的校验错误信息，为一个字符串数组。如果该控件校验通过，该属性应为一个空数组。
- `touched`：表单控件是否被触摸过，为一个布尔值。如果该控件被修改过，该属性应为 `true`，否则为 `false`。

示例代码如下：

form.setFields({
  username: {
    value: 'John',
    errors: [],
    touched: true,
  },
  password: {
    value: '123456',
    errors: ['密码不符合规范'],
    touched: true,
  },
});

在上面的示例中，`form.setFields` 方法将 `username` 和 `password` 两个表单控件的值、校验错误信息和触摸状态都设置了。需要注意的是，该方法只会更新指定的字段，其他字段的值和状态不会受到影响。