radio出现这种情况,一开始什么都没有选择,因为value值定的是“”,但是一旦选择就是全部都选了。所以点击某个选项,实际上点击的整个itemGroup,也就是说标识单个radio的键和整个group的键重合了。

<a-form-model-item label="查询类型" >
    <a-radio-group
            v-model="formData.queryTypeData" >                 
//group作为一个整体,这样才是单选,而group中绑定的formData.queryTypeData是一个双向绑定。初始单选值放在这个data字段中,而选择的结果发生了改变之后,该data字段也会发生改变,从而可以作为表单的选择结果导出。
        <a-radio
                v-for="(item,index) in formItem2.queryTypeItem"    //for循环不能写到group中,不然就是一个radio作为一个group,就不是单选了,是多选。
                :key="index"
                :value="item"                                      
//由于item值不同,所以可以保证每个radio的值不同。但是为什么formData.queryTypeData是选择radio的value值进行保存呢?而不是其他的字段呢?在这个程序中并没有一个地方定义了他们的绑定关系。  https://www.antdv.com/components/radio-cn/,在官网有定义。
                 即v-model绑定的对象是value,而v-model又绑定了queryTypeData,所以queryTypeData和value值是绑定的关系。    
        >
            {{item}}
        </a-radio>
    </a-radio-group>
</a-form-model-item>
<a-form-model-item :wrapper-col="{offset:10}">
    <a-button type="primary" @click="onSubmit">
        信息查询
    </a-button></a-form-model-item>
export default {
    name: "chinaNetInfo",
    data() {
        return {
            formData:{
                queryTypeData:"a",     //选项的初始值设置为选择流量。
            },
            formItem2:{
                queryTypeItem:["a", "b", "c"],     //生成radio选择的值,要跟选择的值区分开。
            },
        }
    },
    methods:{
        onSubmit(){
                    alert('submit!');
                    console.log(this.formData);
                  };
        },
}
Logo

前往低代码交流专区

更多推荐