Skip to content

DictSelect 字典选择器

用于在表单中选择字典项,自动加载字典数据。

基础用法

vue
<template>
  <!-- 单选 -->
  <DictSelect v-model:value="formData.status" dict-type="status" />
  
  <!-- 多选 -->
  <DictSelect v-model:value="formData.types" dict-type="type" multiple />
</template>

Props

属性类型默认值说明
valueString/Number/Arraynullv-model 绑定值
dictTypeString-字典类型(必填)
placeholderString'请选择'占位符
disabledBooleanfalse禁用
clearableBooleantrue可清空
filterableBooleantrue可搜索
multipleBooleanfalse多选

示例

vue
<script setup>
import { ref } from 'vue'
import DictSelect from '@/components/DictSelect.vue'

const formData = ref({
  status: '',
  types: []
})
</script>

<template>
  <n-form :model="formData">
    <n-form-item label="状态">
      <DictSelect v-model:value="formData.status" dict-type="sys_status" />
    </n-form-item>
    
    <n-form-item label="类型">
      <DictSelect 
        v-model:value="formData.types" 
        dict-type="sys_type" 
        multiple 
      />
    </n-form-item>
  </n-form>
</template>