form 表格组件中,使用 v-decorator 绑定 a-radio-group 按钮单选组件
<a-form-item
label="广告组预算"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 12 }"
>
<a-radio-group
v-decorator="['budget', { initialValue: 0 }]"
@change="changBudget"
>
<a-radio-button :value="0">不限</a-radio-button>
<a-radio-button :value="1">指定预算</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item
v-if="budget"
label=" "
:colon="false"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 12 }"
>
<a-input-number
v-decorator="['day_budget']"
:disabled="budget === 0"
:min="500"
:max="100000000"
placeholder="请输入500-100000000的整数"
style="width: 280px;margin-right: 8px"
/>
元/天
</a-form-item>
changBudget() {
this.budget = this.plan.getFieldValue('budget')
console.log(this.budget, arguments)
if (!this.budget) {
this.plan.setFieldsValue({ day_budget: '' })
}
},
绑定 change 方法出现 两次 响应
打印的结果有两个,
有个是改变前的参数,有个事改变后的参数, 出现这样的问题,一定是我哪里出差了,
不绑定表单测试 change 事件是正常的
<a-radio-group @change="changBudget" >
<a-radio-button :value="0">不限</a-radio-button>
<a-radio-button :value="1">指定预算</a-radio-button>
</a-radio-group>
在vue-cli 项目里测试 也是正常的
<a-form :form="form">
<a-form-item label="xx">
...
</a-form-item>
<a-form-item label="投放目标">
<a-radio-group v-decorator="['pricing']" @change="changePricing">
<a-radio-button value="PRICING_OCPM">转化量</a-radio-button>
<a-radio-button value="PRICING_CPC">点击量</a-radio-button>
<a-radio-button value="PRICING_CPM">展示量</a-radio-button>
<a-radio-button value="PRICING_CPV">有效播放量</a-radio-button>
</a-radio-group>
</a-form-item>
</a-form>
跟框架可能有些关系,整不明白,暂时解决方案是采用原生事件 先解决,以后有时间来深入了解
<a-form-item
label="广告组预算"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 12 }"
>
<a-radio-group
v-decorator="['budget', { initialValue: 0 }]"
@change.native="changBudget"
>
<a-radio-button :value="0">不限</a-radio-button>
<a-radio-button :value="1">指定预算</a-radio-button>
</a-radio-group>
</a-form-item>
你对这种想象有什么看法,欢迎留言评论