element-plus如何实现让多选框checkbox实现单选框radio效果

有些项目，对于单选框，不想使用默认的radio的圆圈样式，而是希望用checkbox的方框打勾的勾选效果，但如果直接用checkbox组件，即使设置el-checkbox-group的 :min=“0” :max=“1”，也只能让在选中一个后，其余选项被禁用，想勾选其它选项只能先取消勾选已经选中的选项，无法像单选框那样，勾选其它的自动取消勾选之前的选项。

其实无需给el-checkbox-group设置:min和 :max，只需在 @change 中，每当勾选新的选项时，让v-model绑定的数组弹出第一个值即可

<script setup lang="ts">
import { ref } from 'vue'

const dateRange = [{ date: '今日', val: 1 }, { date: '本周', val: 2 }, { date: '本月', val: 3 }]
const checkedDateRange = ref<number[]>([1])
const checkboxAsRadio = () => {
  checkedDateRange.value.shift()
}
</script>

<template>
  <div class="realtime-data">
    <div class="title">
      <div style="font-weight: bold;">重点实时数据</div>
      <div>
        <el-checkbox-group v-model="checkedDateRange" @change="checkboxAsRadio">
          <el-checkbox v-for="date in dateRange" :key="date.val" :label="date.date" :value="date.val" />
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>