ant design vue 单选框如何实现互不影响回显等

Question

有没有大神答疑解惑下，现在是想要回显单选框和选择单选框提交，不知道如何实现单选框互不影响!用的是antdesign ui

Answer 1

我给你思路参考下：
1.每一行的 a-radio-group 设置不同的 name 属性
2.去掉 v-model="picked"，改用 default-value
3.用数组存储你选择的值

---

写个demo你参考下：

<template>
    <ul>
        <li v-for="(item, index) in radioList" :key="index">
            <a-radio-group :default-value="String(item.role)" @change="onChange($event, index)">
                <a-radio value="0">无</a-radio>
                <a-radio value="2">普通用户</a-radio>
                <a-radio value="3">管理员</a-radio>
            </a-radio-group>
        </li>
    </ul>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
            radioList: [{
                    id: 1,
                    name: '设置',
                    role: 0
                }, {
                    id: 2,
                    name: '智课',
                    role: 0
                },
                {
                    id: 3,
                    name: '信息',
                    role: 0
                }
            ]
        }
    },
    methods: {
        onChange(event, index) {
            this.radioList[index].role = Number(event.target.value);
            // console.info(this.radioList)
        }
    }
}
</script>