el-radio-group中， el-radio-button类型在选项动态变化后，看不到选中状态 #65

agclqq · 2024-01-10T17:25:17Z

先总结一下问题，目前只发现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>

The text was updated successfully, but these errors were encountered:

agclqq · 2024-01-16T15:30:20Z

@YunYouJun 能否帮看一下啊，谢谢

YunYouJun · 2024-01-21T10:06:34Z

你好，我对目前的场景和需要实现的需求有些困惑？
为何需要动态修改选中元素的同时，修改 radio group？

使用 computed 动态计算，或许将解决你的问题。

const gradeList = computed(() => xxx)

agclqq · 2024-01-23T17:58:49Z

@YunYouJun 感谢答复！
场景大致是这样的：书本有一些tag信息，这些信息没有像省市县那样的显示的层级关系。当点某个年级时，其他的tag信息会根据年级变化；同样，如果点学科时，年级也可能会变化(假如年级还没选择时)。

并且，目前这个bug出现在了<el-radio-button> ，而<el-radio>符合预期

目前我还没有找到解决办法

YunYouJun · 2024-01-28T11:33:42Z

<template>
    <el-row>
        <el-col>
            <el-radio-group v-model="grade">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button v-for="g in gradeList" :label="g" />
            </el-radio-group>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <el-radio-group v-model="subject">
                <el-radio label="">全部</el-radio>
                <template v-for="s in subjectList">
                    <el-radio :label="s" />
                </template>
            </el-radio-group>
        </el-col>
    </el-row>

    grade {{ grade }}
    subject {{ subject }}
</template>

<script lang="ts" setup>
import { onMounted, computed, Ref, ref } from 'vue';
const grade = 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 gradeList = computed(() => {
  return new Set(data.value.filter(item => subject.value ? item.subject === subject.value : true)
    .map(item => {
      return item.grade
    }))
})

const subjectList = computed(() => {
  return new Set(data.value.filter(item => grade.value ? item.grade === grade.value : true)
    .map(item => {
      return item.subject
    }))
})
</script>

<style>
.el-radio-button.is-active .el-radio-button__inner {
    background-color: var(--el-radio-button-checked-bg-color);
}
</style>

YunYouJun · 2024-01-28T11:34:04Z

我尝试制作了一个 demo，不知道是否与你的需求一致。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

el-radio-group中， el-radio-button类型在选项动态变化后，看不到选中状态 #65

el-radio-group中， el-radio-button类型在选项动态变化后，看不到选中状态 #65

agclqq commented Jan 10, 2024

agclqq commented Jan 16, 2024

YunYouJun commented Jan 21, 2024

agclqq commented Jan 23, 2024 •

edited

Loading

YunYouJun commented Jan 28, 2024 •

edited

Loading

YunYouJun commented Jan 28, 2024 •

edited

Loading

el-radio-group中， el-radio-button类型 在选项动态变化后，看不到选中状态 #65

el-radio-group中， el-radio-button类型 在选项动态变化后，看不到选中状态 #65

Comments

agclqq commented Jan 10, 2024

agclqq commented Jan 16, 2024

YunYouJun commented Jan 21, 2024

agclqq commented Jan 23, 2024 • edited Loading

YunYouJun commented Jan 28, 2024 • edited Loading

YunYouJun commented Jan 28, 2024 • edited Loading

el-radio-group中， el-radio-button类型在选项动态变化后，看不到选中状态 #65

el-radio-group中， el-radio-button类型在选项动态变化后，看不到选中状态 #65

agclqq commented Jan 23, 2024 •

edited

Loading

YunYouJun commented Jan 28, 2024 •

edited

Loading

YunYouJun commented Jan 28, 2024 •

edited

Loading