Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
agclqq opened this issue Jan 10, 2024 · 5 comments
Open

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

agclqq opened this issue Jan 10, 2024 · 5 comments

Comments

@agclqq
Copy link

agclqq commented Jan 10, 2024

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

agclqq commented Jan 16, 2024

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

@YunYouJun
Copy link
Member

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

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

const gradeList = computed(() => xxx)

@agclqq
Copy link
Author

agclqq commented Jan 23, 2024 •
edited

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

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

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

@YunYouJun
Copy link
Member

YunYouJun commented Jan 28, 2024 •
edited 

<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
Copy link
Member

YunYouJun commented Jan 28, 2024 •
edited

我尝试制作了一个 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@agclqq @YunYouJun