字典组件

介绍

本文介绍如何在 vue3-element-admin 项目中使用字典和字典翻译组件。

字典组件

使用示例

• 下拉字典

  <template>
  	<dict v-model="genderValue" code="gender" />
  </template>
  
  <script setup lang="ts">
    // 导入组件, 默认无需导入，已全局注册
    import Dict from "@/components/Dict.vue";
    const genderValue = ref(1); 
  </script>

• 单选字典

  <template>
  	<dict v-model="genderValue" type="radio" code="gender" />
  </template>
  
  <script setup lang="ts">
      import Dict from "@/components/Dict.vue";
  
      const genderValue = ref(1); 
  </script>

• 复选框字典(多选)

  <template>
  	<dict v-model="hobbies" type="checkbox" code="hobby" />
  </template>
  
  <script setup lang="ts">
      import Dict from "@/components/Dict.vue";
  
      const hobbies  = ref([1,2]); 
  </script>

参数说明

名称	详情	类型	默认值
v-model	绑定值	string / number / object	—
type	字典组件类型 select：下拉 radio：单选框 checkbox：复选框	string	select
code	字典类型编码	string	—

字典翻译组件

在列表和详情页中，通过字典值翻译为字典文本显示。

使用示例

<template>
	<DictLabel v-model="genderValue" code="gender" />
</template>

<script setup lang="ts">
  // 导入组件, 默认无需导入，已全局注册
  import DictLabel from "@/components/DictLabel.vue";
  const genderValue = ref(1); 
</script>

参数说明

名称	详情	类型	默认值
v-model	绑定值	string	—
code	字典类型编码	string	—