Dict Select 字典选择器

用于表单选取数据字典。

全局配置

在全局配置组件属性。

DictSelect组件属性配置

app.provide(DICT_SELECT_KEY, {
  idKey: 'dictId',
  labelKey: 'dictName',
  valueKey: 'dictCode',
  // others props...
});

业务注入

在全局注入数据字典业务。

注入加载数据字典业务

app.provide(LOAD_DICT_LIST_KEY, dictType =>
  axios
    .get('/api/dict/list', {
      params: {
        dictType: dictType,
      },
    })
    .then(res => res.data),
);

注入加载子级数据字典业务

app.provide(LOAD_DICT_LIST_BY_ID_KEY, parentId =>
  axios
    .get('/api/dict/listById', {
      params: {
        id: parentId,
      },
    })
    .then(res => res.data),
);

基础用法

传入dictType或parentId属性即可生成对应的字典数据。

提示

dictType和parentId只能传入其中一个，不能同时传入。

v-model参数

v-model支持多个参数的双向绑定。

设置默认值

通过v-model可以设置默认选中的字典值

属性&事件&插槽透传

Dict Select基于LivSelect封装，所以你可以传入LivSelect的所有属性、事件和插槽。

属性

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值，默认绑定value-key对应的值	T[keyof T] / T[keyof T][]	—
dict-id / v-model:dict-id	选中项绑定值，绑定id-key对应的值	T[keyof T] / T[keyof T][]	—
dict-name / v-model:dict-name	选中项绑定值，绑定label-key对应的值	T[keyof T] / T[keyof T][]	—
dict / v-model:dict	选中项绑定值，绑定数据对象	T / T[]	—
dict-type	字典类型	string	—
parent-id	父级id	number	—
label-key	指定列表项文字为数据对象的某个属性值	string	label
value-key	指定列表项选中后绑定值为数据对象的某个属性值	string	value
id-key	指定列表项选中后绑定id为数据对象的某个属性值	string	id

类型声明

import type { ElSelectProps, SelectProps } from '../../select';

/**
 * 字段选择器属性
 * @template T 字典类型
 */
export interface DictSelectProps<T> {
  /**
   * 字典类型
   */
  dictType?: string;
  /**
   * 父字典id
   */
  parentId?: number;
  /**
   * 指定列表项文字为数据对象的某个属性值
   * @defaultValue "label"
   */
  labelKey?: string;
  /**
   * 指定列表项选中后绑定值为数据对象的某个属性值
   * @defaultValue "value"
   */
  valueKey?: string;
  /**
   * 指定列表项选中后绑定id为数据对象的某个属性值
   * @defaultValue "id"
   */
  idKey?: string;
}

/**
 * 字典选择器包含透传属性在内的全部属性
 * @template T 字典类型
 */
export type DictSelectFullProps<T> = Partial<
  Omit<Omit<ElSelectProps & SelectProps<T>, 'modelValue'>, 'valueKey'> & DictSelectProps<T>
>;