vue2:v-for实现的el-radio-group选中时显示角标，并自定义选中按钮的字体颜色和背景色

我是飞鸟呀

于 2024-12-16 17:08:46 发布

阅读量374

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/l_q_l/article/details/144511806

Vue 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

项目中需要实现一组预定义查询，每一个查询按钮在选中时右上角显示一个角标，展示当前查询返回的数据条目。

1、text-color="#3785FF" fill="#E6EAF1" 处理选中时的字体颜色和背景色，如上图，分别为蓝色和浅灰色。

2、badge中:value="selectedRadio === item?total:''" 动态显示内容，当前按钮选中状态下才显示数字，非选中状态下置为空。

<el-radio-group v-for="(item, index) in searchGroupList" :key="index"
                          v-model="selectedRadio" size="small" 
                          @change="handleSearchGroupChange(item)"
                          text-color="#3785FF" fill="#E6EAF1">
            <el-badge :value="selectedRadio === item?total:''" class="custom-badge" type="warni

了解本专栏