【无标题】在vue项目中，解决ant库表单组件与表单项的value属性不能兼容的问题_ant模组不兼容_qq_43776017的博客-CSDN博客

[xiaodongxier]

报错信息##

Warning: getFieldDecorator will override value, so please don’t set value and v-model directly and use setFieldsValue to set it.

使用场景##

在项目开发中，需要ant库自带的表单验证，但是input输入框的value属性又需要使用的情况下

报错原因##

官方解释

解决方法##

可以按照警告提示的方法将表单项的value属性在标签上去掉，用ant库form组件的设置表单值的setFieldsValue()方法来动态监听vue中表单项值的变化

我的示例代码##

html:
<a-select
                  readOnly
                  :value="partybvalue"
                  id="addpartyboptions"
                  mode="multiple"
                  :options="partyboptions"
                  style="width: 100%"
                  placeholder="双击选择签署方"
                  @change="handleChange1"
                  @search='setSelectPartyb'
                  :dropdownRender="null"
                   v-decorator="[
                'selectPartyb',
                { rules: [{ required: true ,message:'请至少选择一个签署方'}] },
              ]"
                /> 

js:
  this.partybvalue.push(...value)
      
      this.form.setFieldsValue({
        'selectPartyb':_this.partybvalue
      })

就这样，就可以解决表单验证前面的*号与表单项的value属性冲突的问题了。

还有比较复杂的思路 可以用添加样式的方法加上定位给表单标签前方模拟出一个* ，然后自定义一个表单验证规则，通过js原生事件来触发验证表单内容是否符合要求。