Guava Docs

Appearance

字典与 Select ​

对于使用 GvSelect 但不知道怎么配选项？本地枚举和远程字典有什么区别？ 这里汇总了 GvSelect 使用过程中最常碰到的问题。

基础概念 ​

Q: GvSelect 和 Element Plus 的 ElSelect 有什么区别？ ​

GvSelect 是字典驱动的选择器，选项数据来自字典，不支持通过 <ElOption> 插槽写死静态选项。

vue
<!-- ❌ GvSelect 不支持这样用 -->
<GvSelect v-model="value">
  <ElOption label="选项一" value="1" />
  <ElOption label="选项二" value="2" />
</GvSelect>

<!-- ✅ 选项必须通过字典加载 -->
<GvSelect v-model="value" dic-type="e#1=选项一:2=选项二" />

Q: 为什么每个 GvSelect 都要设置 dic-type？不设置会怎样？ ​

dic-type 告诉组件从哪里加载选项数据。如果不设置，控制台会报警告：The dicType needs to be set，且组件无法正常显示选项。

dic-type 格式详解 ​

Q: dic-type 怎么写？格式是什么？ ​

dic-type 有 2 种前缀，分别对应本地枚举和远程字典：

前缀含义示例
e#本地枚举，编码与文案用 =、: 分隔e#1=选项一:2=选项二:3=选项三
t#远程/表字典类型，需配合 dic-remotet#demo
vue
<!-- 本地枚举 -->
<GvSelect v-model="value" dic-type="e#1=选项一:2=选项二:3=选项三" />

Q: 编码和文案可以是非数字字符串吗？ ​

可以。编码与显示名支持任意字符串：

vue
<GvSelect v-model="value" dic-type="e#shanghai=上海:beijing=北京:chengdu=成都" />

远程字典 ​

Q: 怎么用远程字典加载选项？ ​

设置 dic-type="t#xxx" 并传入 dic-remote 异步函数：

vue
<template>
  <GvSelect v-model="value" dic-type="t#demo" :dic-remote="dicRemote" placeholder="请输入关键词" />
</template>

<script lang="ts" setup>
const dicRemote = async (_dicType: string, query: string) => {
  if (!query) {
    return { datas: '[]' };
  }
  return {
    datas: JSON.stringify([
      { c: query, t: `${query} - 结果1` },
      { c: `${query}-2`, t: `${query} - 结果2` }
    ])
  };
};
</script>

Q: dic-remote 返回的数据格式是什么？ ​

返回对象中 datas 字段必须是 JSON 字符串，数组中每个对象：

字段说明
c选项编码（value）
t选项显示文本（label）
ts
return {
  datas: JSON.stringify([
    { c: 'code1', t: '选项一' },
    { c: 'code2', t: '选项二' }
  ])
};

常用功能 ​

Q: 怎么实现多选？ ​

添加 multiple 属性：

vue
<GvSelect v-model="values" multiple dic-type="e#1=A:2=B:3=C" />

Q: 怎么实现搜索过滤？ ​

默认支持 filterable，直接加属性即可：

vue
<GvSelect v-model="value" filterable dic-type="e#1=A:2=B" />

Q: 怎么实现可清空？ ​

添加 clearable 属性：

vue
<GvSelect v-model="value" clearable dic-type="e#1=A:2=B" />

自定义选项 ​

Q: 能不能用 ElOption 自己写选项？ ​

不能。GvSelect 的选项数据必须来自字典（本地枚举或远程字典）。

如果你需要自定义选项展示样式，可以使用 GvSelect 提供的选项模板能力，详见 Select 文档 - 自定义模板。