DictRadio 字典单选

基于系统字典数据渲染的单选组组件，自动从后端获取字典数据并缓存。

基础用法

<template>
  <DictRadio v-model="form.gender" dictType="sys_user_gender" />
</template>

<script setup>
import { DictRadio } from '@/components/Dict'

const form = ref({
  gender: ''
})
</script>

Props

参数	类型	默认值	说明
modelValue	string | number	-	绑定值
dictType	string	-	字典类型（必填）

Events

事件名	说明	回调参数
update:modelValue	值改变时触发	选中的值
change	选择改变时触发	选中的值

完整示例

<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="性别">
      <DictRadio v-model="form.gender" dictType="sys_user_gender" />
    </el-form-item>
    
    <el-form-item label="状态">
      <DictRadio v-model="form.status" dictType="sys_user_status" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { DictRadio } from '@/components/Dict'

const form = ref({
  gender: '1',
  status: '0'
})
</script>

注意事项

1. 字典类型：dictType 对应后端字典类型表的 dict_type 字段
2. 数据缓存：组件会自动缓存字典数据，避免重复请求
3. 值类型：组件会自动识别字典值是字符串还是数字

相关组件

• DictSelect - 字典下拉选择器
• DictTag - 字典标签