字典过滤器

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

getLabelByCodeFilter getCodeByLabelFilter 值必须是单个字符串

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

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

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

<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">{{ personUserInfo1.gend | getLabelByCodeFilter("AAC004")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">{{personUserInfo1.gendLabel}}的编码值是</div>
        <div class="value flex-grow">{{ personUserInfo1.gendLabel | getCodeByLabelFilter("AAC004")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果：</div>
        <div class="value flex-grow">{{ personUserInfo1.fruits | getLabelByCodesFilter("FRUITS")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动：</div>
        <div class="value flex-grow">{{ personUserInfo1.sports | getLabelByCodesFilter("SPORTS")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果的编码值分别是：</div>
        <div class="value flex-grow">{{ personUserInfo1.fruitsLabel | getCodeByLabelsFilter("FRUITS")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动的编码值分别是：</div>
        <div class="value flex-grow">{{ personUserInfo1.sportsLabel | getCodeByLabelsFilter("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">{{ personUserInfo2.gend | getLabelByCodeFilter("AAC004", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">性别的编码值是</div>
        <div class="value flex-grow">{{ personUserInfo2.gendLabel | getCodeByLabelFilter("AAC004", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果：</div>
        <div class="value flex-grow">{{ personUserInfo2.fruits | getLabelByCodesFilter("FRUITS", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动：</div>
        <div class="value flex-grow">{{ personUserInfo2.sports | getLabelByCodesFilter("SPORTS", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果的编码值分别是：</div>
        <div class="value flex-grow">{{ personUserInfo2.fruitsLabel | getCodeByLabelsFilter("FRUITS", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的运动的编码值分别是：</div>
        <div class="value flex-grow">{{ personUserInfo2.sportsLabel | getCodeByLabelsFilter("SPORTS", "未知")}}</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">{{ personUserInfo3.fruits1 | getLabelByCodesFilter("FRUITS", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果2：</div>
        <div class="value flex-grow">{{ personUserInfo3.fruits2 | getLabelByCodesFilter("FRUITS", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果3：</div>
        <div class="value flex-grow">{{ personUserInfo3.fruits3 | getLabelByCodesFilter("FRUITS", "未知", formatFun1)}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果4：</div>
        <div class="value flex-grow">{{ personUserInfo3.fruits4 | getLabelByCodesFilter("FRUITS", "未知", "", "~")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果5：</div>
        <div class="value flex-grow">{{ personUserInfo3.fruits5 | getLabelByCodesFilter("FRUITS", "未知", formatFun1, "~")}}</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">{{ personUserInfo4.fruits1 | getCodeByLabelsFilter("FRUITS", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果2：</div>
        <div class="value flex-grow">{{ personUserInfo4.fruits2 | getCodeByLabelsFilter("FRUITS", "未知")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果3：</div>
        <div class="value flex-grow">{{ personUserInfo4.fruits3 | getCodeByLabelsFilter("FRUITS", "未知", formatFun2)}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果4：</div>
        <div class="value flex-grow">{{ personUserInfo4.fruits4 | getCodeByLabelsFilter("FRUITS", "未知", "", "~")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">喜欢的水果5：</div>
        <div class="value flex-grow">{{ personUserInfo4.fruits5 | getCodeByLabelsFilter("FRUITS", "未知", formatFun2, "~")}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      personUserInfo1: {
        gend: "1",
        gendLabel: "男",
        fruits: "1,2,3,5",
        sports: ["1", "2", "3"],
        fruitsLabel: "草莓,西瓜,芒果",
        sportsLabel: ["篮球", "网球", "足球"]
      },
      personUserInfo2: {
        gend: "",
        gendLabel: "",
        fruits: "",
        sports: "",
        fruitsLabel: "",
        sportsLabel: ""
      },
      personUserInfo3: {
        fruits1: ["1", "2", "3"],
        fruits2: "1,2,3,5",
        fruits3: "1,2,3",
        fruits4: "1~2~3",
        fruits5: "1~2~3"
      },
      personUserInfo4: {
        fruits1: ["西瓜", "草莓", "莲雾"],
        fruits2: "西瓜,草莓,莲雾",
        fruits3: "西瓜,草莓,莲雾",
        fruits4: "西瓜~草莓~莲雾",
        fruits5: "西瓜~草莓~莲雾"
      }
    }
  },
  created() {
    setTimeout(() => {
      this.personUserInfo2 = {
        gend: "12",
        gendLabel: "男1",
        fruits: "12,15",
        sports: ["11", "12", "13"],
        fruitsLabel: "草莓1,西瓜2,芒果",
        sportsLabel: ["篮球1", "网球2", "足球"]
      }
    }, 2000)
  },
  mounted() {},
  methods: {
    //展示值变化一下
    formatFun1(arr) {
      // arr 是这些值  的数组对象
      return arr.map(item => {
        //label 字段名为 配置的 format.label 字段   默认 label   如果有配置 请更换
        return item.label
      }).join("~^~")
    },
    //展示值变化一下
    formatFun2(arr) {
      // arr 是这些值  的数组对象
      return arr.map(item => {
        //value 字段名为 配置的 format.value 字段   默认 value   如果有配置 请更换
        return item.value
      }).join("~^~")
    }
  }
}
</script>

<style lang="less" scoped>
.flex-wrap {
  flex-wrap: wrap;
}
.flex-c-s{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.info-box {
  padding: 0 20px;
  .row {
    width: 50%;
    margin-top: 32px;
    .field {
      width: 144px;
      font-size: 16px;
      color: #666666;
      line-height: 18px;
    }
    .value {
      font-size: 16px;
      color: #333333;
      line-height: 18px;
    }
  }
}
</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 = ","})