element plus单选框实现默认选中

需实现一个默认选中的单选框 点击可以切换样式 效果如下

1 单选框的基本代码

 <el-radio-group v-model="checkboxGroup2" @change="check">
        <el-radio-button
          v-for="(item, index) in modelStore.select"
          :key="index"
          :label="item"
          >{{ item }}</el-radio-button
        >
      </el-radio-group>



<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { useModelStore } from '@/stores/model.js'       // 存放了一些标签名
const modelStore = useModelStore()
const checkboxGroup2 = ref([''])                        // 收集标签

function check (tag) {
  console.log('tag', tag)                               // 监听标签的变化
}

onMounted(() => {
  checkboxGroup2.value = ['全部']
  console.log('checkboxGroup2.value', checkboxGroup2.value)
  loadMoreData()
})

</script>

store/model.js的代码

import { defineStore } from 'pinia'
import { reactive, ref } from 'vue'

export const useModelStore = defineStore('model', () => {

  const select = ['全部', '人物', '武器', '建筑', '战争']

  const selectList = ref([])

  return { select, selectList }
})

目前鼠标划过的效果为这样 , 还是没有默认选中 '"全部"  , 且能监听到标签的变化 

2 因为默认情况下单选框不会自动应用选中项的 CSS , 用:class和计算属性来判断当前项是否被选中
 

  <el-radio-group v-model="checkboxGroup2" @change="check">
        <el-radio-button
          v-for="(item, index) in modelStore.select"
          :key="index"
          :label="item"
          :class="{ selected: isSelected(item) }"               // :class来监听标签的变化
          >{{ item }}</el-radio-button
        >
      </el-radio-group>


<script setup>
const isSelected = computed(() => item => checkboxGroup2.value.includes(item)) 



<style lang="less" scoped>

 .selected {
      background-color: #409eff;
    }


:deep(.el-radio-button__inner) {
    border: none;                                   // 去除单选框默认携带的边框
    border-radius: 3px;
    transition: none;                               // 解决下面的过渡效果 
  }

</style>

目前得到了默认选中的单选框 , 但发现在切换标签时按钮左侧会变化 (按钮会从红色过渡到绿色) 

我本以为是bfc的原因 , 找了单选框属性中的el-radio-button__original-radio和el-radio-button__inner一直做margin和padding方面的处理 , 后来发现是过渡效果 

 

3 拓 : vue3 element plus单选框默认不支持数组传入 , 我的项目中传入了数组 , 会报下图这样的警告 , 想清除警告可以去main.js中设置

const app = createApp(App)

app.config.productionTip = false     //禁掉vue的warn提醒
app.config.warnHandler = () => {}
app.config.runtimeCompiler = true

app.use(pinia)
app.use(router)
app.mount('#app')