### 使用 `a-form-item` 动态控制必填项星号 为了实现 `a-form-item` 组件中的必填项红色星号按需显示，在 Ant Design Vue 中可以通过自定义样式以及条件渲染来达成这一效果。 #### 自定义样式覆盖默认行为 Ant Design 默认会在标签前自动添加红色星号，如果希望动态控制这个星号的显示与否，则可以利用 CSS 伪元素 `::before` 来替代原有的标记方式。具体做法是在特定条件下通过 JavaScript 或者 Vue 的计算属性判断是否应该展示该星号，并相应地应用不同的 class 名称给 `<a-form-item>` 标签[^1]。 对于需要隐藏星号的情况，可以在组件内部定义如下 SCSS/SASS： ```scss .no-required-star { .ant-form-item-label > label::before { display: none; } } ``` 当某个字段不是必需的时候就为其父级容器添加 `.no-required-star` 类名即可移除星号。 #### 结合业务逻辑动态切换 假设有一个布尔类型的变量 `isRequired` 控制当前输入框是否为必选项，那么就可以基于此值决定何时向 DOM 插入上述提到的额外 className: ```html <template> <!-- ... --> <a-form-model :model="form"> <a-form-model-item v-bind:class="{ 'no-required-star': !isRequired }" prop="exampleField" :rules="[ { required: isRequired, message: 'This field is required' }]"> <template slot="label">Example Field</template> <a-input v-model="form.exampleField"/> </a-form-model-item> </a-form-model> <!-- ... --> </template> <script> export default { data() { return { form: {}, isRequired: false, }; }, }; </script> ``` 这段代码展示了如何根据 `isRequired` 值的变化调整表单项上的类名，从而影响其外观表现。同时注意这里也设置了验证规则里的 `required` 属性与之同步变化[^2]。 另外需要注意的是，如果遇到类似嵌套 FormItem 导致的小红点丢失问题，应确保内外层 Item 都配置好相应的 `name` 和 `rules` 参数[^3]。