树形字典过滤器

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

详细查看后面的函数入参

<script setup lang="ts">
import { ref } from "vue";
import {
  getTreeLabelByCodeFilter, getTreeCodeByLabelFilter, getTreeLabelByCodesFilter, getTreeCodeByLabelsFilter
} from "vue3-element-dict";

const personUserInfo1 = ref({
  area1: "350624",
  area2: "诏安县",
  area3: "350424,350624",
  area4: "诏安县,思明区",
});
const personUserInfo2 = ref({
  area1: "3506241",
  area2: "诏安县2",
  area3: "35042422,3150624",
  area4: "诏安县,思明2区",
});
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, treeSetting: any) => {
  // arr 是这些值  的数组对象
  return arr
    .map((item: any) => {
      //label 字段名为 配置的 format.label 字段   默认 label   如果有配置 请更换
      return item[treeSetting.labelField];
    })
    .join("~^~");
};
//展示值变化一下
const formatFun2 = (arr: any, treeSetting: any) => {
  // arr 是这些值  的数组对象
  return arr
    .map((item: any) => {
      //value 字段名为 配置的 format.value 字段   默认 value   如果有配置 请更换
      return item[treeSetting.idField];
    })
    .join("~^~");
};

const formatFunIn = (arr: any, treeSetting: any) => {
  return arr
    .map((item: any) => {
      //value 字段名为 配置的 format.value 字段   默认 value   如果有配置 请更换
      return item[treeSetting.idField];
    })
    .join("~^~");
}

const formatFunOut = (arr: any) => {
  return arr.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">{{personUserInfo1.area1}}是哪个地方的区域码：</div>
        <div class="value flex-grow">
          {{ getTreeLabelByCodeFilter(personUserInfo1.area1, "area") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">
          {{ personUserInfo1.area2 }}的编码值是
        </div>
        <div class="value flex-grow">
          {{ getTreeCodeByLabelFilter(personUserInfo1.area2, "area") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo1.area3}}是哪些地方的区域码：</div>
        <div class="value flex-grow">
          {{ getTreeLabelByCodesFilter(personUserInfo1.area3, "area") }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo1.area4}}的区域码是多少：</div>
        <div class="value flex-grow">
          {{ getTreeCodeByLabelsFilter(personUserInfo1.area4, "area") }}
        </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">{{personUserInfo2.area1}}是哪个地方的区域码：</div>
        <div class="value flex-grow">
          {{ getTreeLabelByCodeFilter(personUserInfo2.area1, "area", {defaultVal: "未知"}) }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">
          {{ personUserInfo2.area2 }}的编码值是
        </div>
        <div class="value flex-grow">
          {{ getTreeCodeByLabelFilter(personUserInfo2.area2, "area", {defaultVal: "未知"}) }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo2.area3}}是哪些地方的区域码：</div>
        <div class="value flex-grow">
          {{ getTreeLabelByCodesFilter(personUserInfo2.area3, "area", {defaultVal: "未知"}) }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo2.area4}}的区域码是多少：</div>
        <div class="value flex-grow">
          {{ getTreeCodeByLabelsFilter(personUserInfo2.area4, "area", {defaultVal: "未知"}) }}
        </div>
      </div>
    </div>

    <div class="title">配置format函数</div>
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo1.area1}}是哪个地方的区域码：</div>
        <div class="value flex-grow">
          {{ getTreeLabelByCodeFilter(personUserInfo1.area1, "area",{defaultVal: "未知", formatFun: formatFun1}) }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">
          {{ personUserInfo1.area2 }}的编码值是
        </div>
        <div class="value flex-grow">
          {{ getTreeCodeByLabelFilter(personUserInfo1.area2, "area", {defaultVal: "未知", formatFun: formatFun2}) }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo1.area3}}是哪些地方的区域码：</div>
        <div class="value flex-grow">
          {{ getTreeLabelByCodesFilter(personUserInfo1.area3, "area", {defaultVal: "未知", formatFunIn: formatFunIn}) }}
        </div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo1.area4}}的区域码是多少：</div>
        <div class="value flex-grow">
          {{ getTreeCodeByLabelsFilter(personUserInfo1.area4, "area", {defaultVal: "未知",formatFunOut: formatFunOut}) }}
        </div>
      </div>
    </div>
  </div>
</template>

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

显示代码

通过code返回label

/**
 * @description: getTreeLabelByCodeFilter
 * @param {*} val 数据值
 * @param {*} type 字典类型
 * @param {
 	defaultVal 展示默认值
    formatFun 对展示值进行方法格式化
 	treeSetting 设置，字段同字典包配置中的 treeSetting
  }
 * @return {*} "350624"  =》 "福建省/漳州市/诏安县"
 * @author: syx
 */
function getTreeLabelByCodeFilter(val, type, {defaultVal = "", formatFun, treeSetting})

通过label返回code

/**
 * @description: getTreeCodeByLabelFilter
 * @param {*} val 数据值
 * @param {*} type 字典类型
 * @param {
 	defaultVal 展示默认值
    formatFun 对展示值进行方法格式化
 	treeSetting 设置，字段同字典包配置中的 treeSetting
  }
 * @return {*} "诏安县" => "35000/350600/350624"
 * @author: syx
 */
function getTreeCodeByLabelFilter(val, type, {defaultVal = "", formatFun, treeSetting})

通过codes返回label

/**
 * @description: getTreeLabelByCodesFilter
 * @param {*} vals 数据值
 * @param {*} type 字典类型
 * @param {
 	defaultVal 展示默认值
    formatFunIn 对里面的数组进行方法格式化
	treeSetting 设置，字段同字典包配置中的 treeSetting
 	formatFunOut 对外面的数组进行方法格式化
 	spacer 数据值间隔符
 }
 * @return {*} "350624,350600" => "福建省/漳州市/诏安县,福建省/漳州市"
 * @author: syx
 */
function getTreeLabelByCodesFilter(vals, type, {defaultVal = "", formatFunIn, treeSetting, formatFunOut, spacer = ","})

通过labels返回code

/**
 * @description: getTreeCodeByLabelsFilter
 * @param {*} vals 数据值
 * @param {*} type 字典类型
 * @param {
 	defaultVal 展示默认值
    formatFunIn 对里面的数组进行方法格式化
	treeSetting 设置，字段同字典包配置中的 treeSetting
 	formatFunOut 对外面的数组进行方法格式化
 	spacer 数据值间隔符
 }
 * @return {*} "诏安县,漳州市" => "35000/350600/350624,35000/350600"
 * @author: syx
 */
function getTreeCodeByLabelsFilter(vals, type, {defaultVal = "", formatFunIn, treeSetting, formatFunOut, spacer = ","})