DictSelect 字典选择器

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

基础用法

<template>
  <DictSelect v-model="form.status" dictType="sys_user_status" />
</template>

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

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

Props

参数	类型	默认值	说明
modelValue	string | number	-	绑定值
dictType	string	-	字典类型（必填）
placeholder	string	'请选择'	占位提示
disabled	boolean	false	是否禁用

Events

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

完整示例

<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="用户状态">
      <DictSelect 
        v-model="form.status" 
        dictType="sys_user_status"
        placeholder="请选择用户状态"
        :disabled="isViewMode"
        @change="handleStatusChange"
      />
    </el-form-item>
    
    <el-form-item label="性别">
      <DictSelect 
        v-model="form.gender" 
        dictType="sys_user_gender"
        placeholder="请选择性别"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { DictSelect } from '@/components/Dict'
import { ElMessage } from 'element-plus'

const form = ref({
  status: '0',
  gender: '1'
})

const isViewMode = ref(false)

const handleStatusChange = (value) => {
  ElMessage.success(`状态已切换为: ${value}`)
}
</script>

注意事项

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

相关组件

• DictRadio - 字典单选组
• DictTag - 字典标签