字典过滤器

与字典相关的全局过滤器，使用这些过滤器，您可以轻松将label和value随意转换。

getLabelByCodeFilter getCodeByLabelFilter 值必须是单个字符串

getLabelByCodesFilter getCodeByLabelsFilter 值可以是数组也可以是字符串，并用某个分隔符分开，分隔符可配置

getLabelByCodesFilter 第一个参数接收字典类型，第二个参数接收默认值，第三个参数接收一个配置对象

getCodeByLabelsFilter 第一个参数接收字典类型，第二个参数接收默认值，第三个参数接收一个配置对象

<script setup lang="ts">
import { ref } from "vue";
import {
  getLabelByCodeFilter,
  getCodeByLabelFilter,
  getLabelByCodesFilter,
  getCodeByLabelsFilter
} from "vue3-element-dict";

const personUserInfo1 = ref({
  gend: "1",
  gendLabel: "男",
  fruits: "1,2,3,5",
  sports: ["1", "2", "3"],
  fruitsLabel: "草莓,西瓜,芒果",
  sportsLabel: ["篮球", "网球", "足球"],
});
const personUserInfo2 = ref({
  gend: "",
  gendLabel: "",
  fruits: "",
  sports: "",
  fruitsLabel: "",
  sportsLabel: "",
});
const personUserInfo3 = ref({
  fruits1: ["1", "2", "3"],
  fruits2: "1,2,3,5",
  fruits3: "1,2,3",
  fruits4: "1~2~3",
  fruits5: "1~2~3",
});
const personUserInfo4 = ref({
  fruits1: ["西瓜", "草莓", "莲雾"],
  fruits2: "西瓜,草莓,莲雾",
  fruits3: "西瓜,草莓,莲雾",
  fruits4: "西瓜~草莓~莲雾",
  fruits5: "西瓜~草莓~莲雾",
});

//展示值变化一下
const formatFun1 = (arr: any, format: any) => {
  // arr 是这些值  的数组对象
  return arr
    .map((item: any) => {
      //label 字段名为 配置的 format.label 字段   默认 label   如果有配置 请更换
      return item[format.label];
    })
    .join("~^~");
};
//展示值变化一下
const formatFun2 = (arr: any, format: any) => {
  // arr 是这些值  的数组对象
  return arr
    .map((item: any) => {
      //value 字段名为 配置的 format.value 字段   默认 value   如果有配置 请更换
      return item[format.value];
    })
    .join("~^~");
};
</script>
<template>
  <div ref="container">
    <div class="title">基础用法</div>
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s">
        <div class="field flex-shrink">性别：</div>
        <div class="value flex-grow">
          {{ getLabelByCodeFilter(personUserInfo1.gend, "gend") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">
          {{ personUserInfo1.gendLabel }}的编码值是
        </div>
        <div class="value flex-grow">
          {{ getCodeByLabelFilter(personUserInfo1.gendLabel, "AAC004") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果：</div>
        <div class="value flex-grow">
          {{ getLabelByCodesFilter(personUserInfo1.fruits, "FRUITS") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动：</div>
        <div class="value flex-grow">
          {{ getLabelByCodesFilter(personUserInfo1.sports, "SPORTS") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果的编码值分别是：</div>
        <div class="value flex-grow">
          {{ getCodeByLabelsFilter(personUserInfo1.fruitsLabel, "FRUITS") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动的编码值分别是：</div>
        <div class="value flex-grow">
          {{ getCodeByLabelsFilter(personUserInfo1.sportsLabel, "SPORTS") }}
        </div>
      </div>
    </div>

    <div class="title">配置默认值</div>
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s">
        <div class="field flex-shrink">性别：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodeFilter(personUserInfo2.gend, "AAC004", "未知")
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">性别的编码值是</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelFilter(personUserInfo2.gendLabel, "AAC004", "未知")
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodesFilter(personUserInfo2.fruits, "FRUITS", {
              defaultVal: "未知"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodesFilter(personUserInfo2.sports, "SPORTS", {
              defaultVal: "未知"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果的编码值分别是：</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelsFilter(personUserInfo2.fruitsLabel, "FRUITS", {
              defaultVal: "未知"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动的编码值分别是：</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelsFilter(personUserInfo2.sportsLabel, "SPORTS", {
              defaultVal: "未知"
            })
          }}
        </div>
      </div>
    </div>

    <div class="title">getLabelByCodes示例</div>
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果1：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodesFilter(personUserInfo3.fruits1, "FRUITS", {
              defaultVal: "未知"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果2：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodesFilter(personUserInfo3.fruits2, "FRUITS", {
              defaultVal: "未知"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果3：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodesFilter(
              personUserInfo3.fruits3,
              "FRUITS",
             {
              defaultVal: "未知",
             formatFun: formatFun1
            }
              
            )
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果4：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodesFilter(
              personUserInfo3.fruits4,
              "FRUITS",
              {
                defaultVal: "未知",
                spacer: "~"
              }
              )
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果5：</div>
        <div class="value flex-grow">
          {{
            getLabelByCodesFilter(personUserInfo3.fruits5, "FRUITS", {
              defaultVal: "未知",
              formatFun: formatFun1,
              spacer: "~"
            })
          }}
        </div>
      </div>
    </div>

    <div class="title">getCodeByLabels示例</div>
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果1：</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelsFilter(personUserInfo4.fruits1, "FRUITS", {
              defaultVal: "未知",
              formatFun: formatFun1,
              spacer: "~"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果2：</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelsFilter(personUserInfo4.fruits2, "FRUITS", {
              defaultVal: "未知",
              formatFun: formatFun1,
              spacer: "~"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果3：</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelsFilter(personUserInfo4.fruits3, "FRUITS", {
              defaultVal: "未知",
              formatFun: formatFun2,
              spacer: "~"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果4：</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelsFilter(personUserInfo4.fruits4, "FRUITS", {
              defaultVal: "未知",
              spacer: "~"
            })
          }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果5：</div>
        <div class="value flex-grow">
          {{
            getCodeByLabelsFilter(personUserInfo4.fruits5, "FRUITS", {
              defaultVal: "未知",
              formatFun: formatFun2,
              spacer: "~"
            })
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.questions-box {
  margin-bottom: 20px;
}
</style>

显示代码

Filters Dict Api

 /**
   * @description: getLabelByCodeFilter 通过code获取label
   * @param {*} val 字典值
   * @param {*} type 字典类型
   * @param {*} defaultVal 默认值  默认 ""
   * @return {*} label  返回字典表查找后的字典值  如果没有  则展示默认值
   * @author: syx
   */  
const getLabelByCodeFilter = (val, type, defaultVal = "")

 /**
   * @description: getCodeByLabelFilter 通过label获取code
   * @param {*} val 字典值
   * @param {*} type 字典类型
   * @param {*} defaultVal 默认值  默认 ""
   * @return {*} code  返回字典表查找后的字典值  如果没有  则展示默认值
   * @author: syx
   */  
const getCodeByLabelFilter = (val, type, defaultVal = "")


	/**
     * @description: 通过codes 获取 labels
     * @param {*} vals 字典值 多个的话 可传数组形式，字符串形式默认英文逗号隔开，如果不是的话，可配置spacer
     * @param {*} type 字典类型
     	defaultVal 默认值
   		formatFun 配置数据展示格式
        spacer 字典值间隔符
      }
     * @return {*} labels 返回字典表查找后的字典值  如果没有  则展示默认值 对应位置展示
     * @author: syx
     */  
const getLabelByCodesFilter = (vals, type, {defaultVal = "", formatFun, spacer = ","})


	/**
     * @description: 通过labels 获取 codes
     * @param {*} vals 字典值 多个的话 可传数组形式，字符串形式默认英文逗号隔开，如果不是的话，可配置spacer
     * @param {*} type 字典类型
     * @param {
     	defaultVal 默认值
   		formatFun 配置数据展示格式
        spacer 字典值间隔符
      }
     * @return {*} codes 返回字典表查找后的字典值  如果没有  则展示默认值 对应位置展示
     * @author: syx
     */  
const getCodeByLabelsFilter = (vals, type, {defaultVal = "", formatFun, spacer = ","})