element-plus-vite-starter icon indicating copy to clipboard operation
element-plus-vite-starter copied to clipboard

Published 20 hours ago • verified publisher icon element-plus

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

Open agclqq opened this issue 1 year ago • 5 comments

先总结一下问题，目前只发现el-radio-button有问题，el-radio正常。 当el-radio-button的数量动态变化后，is-active的css效果似乎有问题。v-model的数据是正确的。希望尽快修复。 20240111-011941

<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>

agclqq avatar Jan 10 '24 17:01 agclqq

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

agclqq avatar Jan 16 '24 15:01 agclqq

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

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

const gradeList = computed(() => xxx)

YunYouJun avatar Jan 21 '24 10:01 YunYouJun

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

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

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

agclqq avatar Jan 23 '24 17:01 agclqq 

<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 avatar Jan 28 '24 11:01 YunYouJun

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

https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgICA8ZWwtcm93PlxuICAgICAgICA8ZWwtY29sPlxuICAgICAgICAgICAgPGVsLXJhZGlvLWdyb3VwIHYtbW9kZWw9XCJncmFkZVwiPlxuICAgICAgICAgICAgICAgIDxlbC1yYWRpby1idXR0b24gbGFiZWw9XCJcIj7lhajpg6g8L2VsLXJhZGlvLWJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8ZWwtcmFkaW8tYnV0dG9uIHYtZm9yPVwiZyBpbiBncmFkZUxpc3RcIiA6bGFiZWw9XCJnXCIgLz5cbiAgICAgICAgICAgIDwvZWwtcmFkaW8tZ3JvdXA+XG4gICAgICAgIDwvZWwtY29sPlxuICAgIDwvZWwtcm93PlxuICAgIDxlbC1yb3c+XG4gICAgICAgIDxlbC1jb2w+XG4gICAgICAgICAgICA8ZWwtcmFkaW8tZ3JvdXAgdi1tb2RlbD1cInN1YmplY3RcIj5cbiAgICAgICAgICAgICAgICA8ZWwtcmFkaW8gbGFiZWw9XCJcIj7lhajpg6g8L2VsLXJhZGlvPlxuICAgICAgICAgICAgICAgIDx0ZW1wbGF0ZSB2LWZvcj1cInMgaW4gc3ViamVjdExpc3RcIj5cbiAgICAgICAgICAgICAgICAgICAgPGVsLXJhZGlvIDpsYWJlbD1cInNcIiAvPlxuICAgICAgICAgICAgICAgIDwvdGVtcGxhdGU+XG4gICAgICAgICAgICA8L2VsLXJhZGlvLWdyb3VwPlxuICAgICAgICA8L2VsLWNvbD5cbiAgICA8L2VsLXJvdz5cblxuICAgIGdyYWRlIHt7IGdyYWRlIH19XG4gICAgc3ViamVjdCB7eyBzdWJqZWN0IH19XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IGxhbmc9XCJ0c1wiIHNldHVwPlxuaW1wb3J0IHsgb25Nb3VudGVkLCBjb21wdXRlZCwgUmVmLCByZWYgfSBmcm9tICd2dWUnO1xuY29uc3QgZ3JhZGUgPSByZWYoJycpO1xuY29uc3Qgc3ViamVjdCA9IHJlZignJyk7XG5jb25zdCBkYXRhID0gcmVmKFtcbiAgICB7IFwiZ3JhZGVcIjogXCLkuIDlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6K+t5paHXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuIDlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5pWw5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuIDlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6Iux6K+tXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuozlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6K+t5paHXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuozlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5pWw5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuozlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6Iux6K+tXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuInlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6K+t5paHXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuInlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5pWw5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuInlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6Iux6K+tXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuInlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Y6G5Y+yXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkuInlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Zyw55CGXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlm5vlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6K+t5paHXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlm5vlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5pWw5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlm5vlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6Iux6K+tXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlm5vlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Y6G5Y+yXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlm5vlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Zyw55CGXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkupTlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6K+t5paHXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkupTlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5pWw5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkupTlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6Iux6K+tXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkupTlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Y6G5Y+yXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkupTlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Zyw55CGXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkupTlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi54mp55CGXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLkupTlubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5YyW5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6K+t5paHXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5pWw5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi6Iux6K+tXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Y6G5Y+yXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5Zyw55CGXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi54mp55CGXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5YyW5a2mXCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi5pS/5rK7XCIgfSxcbiAgICB7IFwiZ3JhZGVcIjogXCLlha3lubTnuqdcIiwgXCJzdWJqZWN0XCI6IFwi55Sf54mpXCIgfSxcbl0pO1xuXG5jb25zdCBncmFkZUxpc3QgPSBjb21wdXRlZCgoKSA9PiB7XG4gIHJldHVybiBuZXcgU2V0KGRhdGEudmFsdWUuZmlsdGVyKGl0ZW0gPT4gc3ViamVjdC52YWx1ZSA/IGl0ZW0uc3ViamVjdCA9PT0gc3ViamVjdC52YWx1ZSA6IHRydWUpXG4gICAgLm1hcChpdGVtID0+IHtcbiAgICAgIHJldHVybiBpdGVtLmdyYWRlXG4gICAgfSkpXG59KVxuXG5jb25zdCBzdWJqZWN0TGlzdCA9IGNvbXB1dGVkKCgpID0+IHtcbiAgcmV0dXJuIG5ldyBTZXQoZGF0YS52YWx1ZS5maWx0ZXIoaXRlbSA9PiBncmFkZS52YWx1ZSA/IGl0ZW0uZ3JhZGUgPT09IGdyYWRlLnZhbHVlIDogdHJ1ZSlcbiAgICAubWFwKGl0ZW0gPT4ge1xuICAgICAgcmV0dXJuIGl0ZW0uc3ViamVjdFxuICAgIH0pKVxufSlcbjwvc2NyaXB0PlxuXG48c3R5bGU+XG4uZWwtcmFkaW8tYnV0dG9uLmlzLWFjdGl2ZSAuZWwtcmFkaW8tYnV0dG9uX19pbm5lciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZWwtcmFkaW8tYnV0dG9uLWNoZWNrZWQtYmctY29sb3IpO1xufVxuPC9zdHlsZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7fVxufSIsInRzY29uZmlnLmpzb24iOiJ7XG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcbiAgICBcInR5cGVzXCI6IFtcImVsZW1lbnQtcGx1cy9nbG9iYWwuZC50c1wiXSxcbiAgICBcImFsbG93SW1wb3J0aW5nVHNFeHRlbnNpb25zXCI6IHRydWUsXG4gICAgXCJhbGxvd0pzXCI6IHRydWUsXG4gICAgXCJjaGVja0pzXCI6IHRydWVcbiAgfSxcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IDMuM1xuICB9XG59XG4iLCJfbyI6e319

YunYouJun avatar Jan 28 '24 11:01 YunYouJun