1.需求描述
2.代码实现
2.1样式代码
<a-form-item label="性别">
<a-radio-group
v-decorator="[
'sex',
is_add
? {
initialValue: sex[0].value,
rules: [{ required: false, message: '请选择性别' }],
}
: {
rules: [{ required: false, message: '请选择性别' }],
},
]"
:disabled="shows">
<a-radio v-for="(item, index) in sex" :value="item.value" :key="index">{{ item.dictValueName }}</a-radio>
</a-radio-group>
</a-form-item>
sex
是取的字典值,数据结构如下图所示:
实现加默认值代码:initialValue: sex[0].value
。
2.2获取数据
此处需要根据后台的需求来处理数据,现在后台需要的是int
类型,因此有两种处理方式,不用做任何处理即不用拼接,或者做如下处理:
formValues.f_sex = formValues.f_sex.key;
之前后台需要的是string
类型即"0"
,这时为了避免出错需要都做如下处理:
formValues.f_sex = formValues.f_sex.key.toString();
2.3提交数据
也是需要根据后台的需求来对数据进行处理,若后台只时需要sex,sexValue
两个字段,做如下处理即可:
this.sex.forEach((item) => {
if (item.value === values.sex) {
values.sexValue = item.dictValueName;
}
});
若后台需要的是对象类型即sex{key:1,label:"男"}
,做如下处理:
let sex = this.state.filter((item) => {
if (item.value == data.f_sex) return item;
});
data.f_sex = {
key: data.f_sex,
label: sex[0].dictValueName,
};
或者:
this.sex.forEach((item) => {
if (item.value === data.sex) {
data.sex = {
key: parseInt(item.value),
label: item.dictValueName,
};
}
});