el-radio-group中， el-radio-button类型 在选项动态变化后，看不到选中状态 #65
Description
先总结一下问题，目前只发现el-radio-button有问题，el-radio正常。
当el-radio-button的数量动态变化后，is-active的css效果似乎有问题。v-model的数据是正确的。希望尽快修复。
<template>
<el-row>
<el-col>
<el-radio-group v-model="grade" @change="aggAttr">
<el-radio-button label="">全部</el-radio-button>
<template v-for="g in gradeList">
<el-radio-button :label="g" />
</template>
</el-radio-group>
</el-col>
</el-row>
<el-row>
<el-col>
<el-radio-group v-model="subject" @change="aggAttr">
<el-radio label="">全部</el-radio>
<template v-for="s in subjectList">
<el-radio :label="s" />
</template>
</el-radio-group>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { Ref } from 'vue';
import { ref } from 'vue';
const gradeList: Ref<string[]> = ref([]);
const grade = ref('');
const subjectList: Ref<string[]> = ref([]);
const subject = ref('');
const data = ref([
{ "grade": "一年级", "subject": "语文" },
{ "grade": "一年级", "subject": "数学" },
{ "grade": "一年级", "subject": "英语" },
{ "grade": "二年级", "subject": "语文" },
{ "grade": "二年级", "subject": "数学" },
{ "grade": "二年级", "subject": "英语" },
{ "grade": "三年级", "subject": "语文" },
{ "grade": "三年级", "subject": "数学" },
{ "grade": "三年级", "subject": "英语" },
{ "grade": "三年级", "subject": "历史" },
{ "grade": "三年级", "subject": "地理" },
{ "grade": "四年级", "subject": "语文" },
{ "grade": "四年级", "subject": "数学" },
{ "grade": "四年级", "subject": "英语" },
{ "grade": "四年级", "subject": "历史" },
{ "grade": "四年级", "subject": "地理" },
{ "grade": "五年级", "subject": "语文" },
{ "grade": "五年级", "subject": "数学" },
{ "grade": "五年级", "subject": "英语" },
{ "grade": "五年级", "subject": "历史" },
{ "grade": "五年级", "subject": "地理" },
{ "grade": "五年级", "subject": "物理" },
{ "grade": "五年级", "subject": "化学" },
{ "grade": "六年级", "subject": "语文" },
{ "grade": "六年级", "subject": "数学" },
{ "grade": "六年级", "subject": "英语" },
{ "grade": "六年级", "subject": "历史" },
{ "grade": "六年级", "subject": "地理" },
{ "grade": "六年级", "subject": "物理" },
{ "grade": "六年级", "subject": "化学" },
{ "grade": "六年级", "subject": "政治" },
{ "grade": "六年级", "subject": "生物" },
]);
const aggAttr = () => {
gradeList.value=[]
subjectList.value=[]
data.value.forEach((item) => {
if (subject.value && subject.value != item.subject) {
return
}
if (grade.value && grade.value != item.grade) {
return
}
if (!subjectList.value.includes(item.subject)) {
subjectList.value.push(item.subject)
}
if (!gradeList.value.includes(item.grade)) {
gradeList.value.push(item.grade)
}
});
};
onMounted(() => {
aggAttr()
})
</script>