vue ant design 动态设置表单 填写项是否必填

vue ant design 是一个基于 Vue.js 的 UI 组件库，提供了很多优秀的组件，包括表单组件。在使用 ant design 表单组件的过程中，我们可能会遇到动态设置表单填写项是否必填的情况。

针对这种情况，我们可以利用 ant design 表单组件提供的 API 来实现动态设置表单必填项的功能。

首先，我们需要使用 ant design 表单组件提供的 Form.create() 方法来创建一个表单组件实例。然后，在表单中声明每一个需要填写的项，并在其属性中设置一个可变的 required 属性。这个属性可以是一个布尔值，表示当前这个填写项是否必填。例如：

<Form.Item label="用户名" required={userRequired}>
  {getFieldDecorator('username', {
    rules: [{ required: userRequired, message: '请输入用户名' }],
    initialValue: ''
  })(<Input placeholder="请输入用户名" />)}
</Form.Item>

上述代码中，变量 userRequired 是一个可变的布尔值，可以根据表单的实际情况动态设置。在 Form.Item 的 required 属性中，我们将 userRequired 变量作为参数传递进去，来决定当前填写项是否必填。同时，在 getFieldDecorator() 方法的 rules 属性中，我们也将 userRequired 变量作为参数传递进去，来设置当前填写项的校验规则。

当我们需要动态改变某一个填写项是否必填时，只需要改变相应的变量即可：

this.setState({ userRequired: true });

上述代码中，我们通过调用 setState() 方法，改变组件的状态，从而改变 userRequired 变量的值，从而动态改变表单项是否必填。

总的来说，利用 ant design 表单组件提供的可变属性（如 required）以及表单组件实例的状态管理能力，我们可以轻松地实现动态设置表单必填项的功能。同时，这种方法也适用于其他表单组件库。