封装字典解析组件

更新: 2025/3/24 21:09:14 字数: 0 字

需求分析

需求

1. 系统中我们最常用的是字典类型的数据，比如性别、状态、是否、等。
2. 他们展示的值都是固定的，但是存储的值是数字或者字符串。
3. 对此我们可以封装一个组件，去统一处理。

/**
 * 获取字典类型数据
 * @param arr 字典数组
 * @param value 字典值  数组中对象对应的字符串
 * @param label 字典标签  对应的值的字符串
 */
export function getDictTypeDate(arr: Array, value: string, label: string): Array {
    if(!arr.length) return [];
    return arr.map((item) => {
        return {
            value: item[value],
            label: item[label],
            // 这里可以扩展其他字段，比如
            type: item.type | null,
        }
    });
}

DictTag 组件的实现

功能描述

1. 传入字典 options 和 value，根据 value 去获取对应的展示值。
2. 分两种情况：只展示文字；使用 el-tag 组件展示；

示例:

<template>
  <el-table :data="data">
    <el-table-column prop="sex" label="性别">
      <template #default="scope">
        <!--   这里 使用 DictTag 组件，传入 options 和 value     -->
        <DictTag :options="sexOptions" :value="scope.row.sex"/>
      </template>
    </el-table-column>
  </el-table>
</template>

代码示例:

loading

<Dicttag/>组件代码:

<script setup lang="ts">
import {computed, defineComponent} from "vue";
const props = defineProps({
  // 字典类型数据 [{label: '值', value: '键'}]
  options: {
    type: Array,
    required: true
  },
  // 当前的值
  value: {
    type: [Number, String, Array],
    required: true
  },
  // 当未找到匹配的数据时，显示 value
  showValue: {
    type: Boolean,
    default: false,
  },
  // 展示原始数据 --- 就是不加颜色快
  noTag: {
    type: Boolean,
    default: false,
  },
  size: {
    type: [String, Array],
    default: 'default'
  },
})
const valueList = computed(() => {
  if (props.value !== null && typeof props.value !== 'undefined') {
    if (Array.isArray(props.value)) {
      // 将其 value 改成 string 类型方便比较
      return props.value.map((item: any) => {
        return String(item).trim()
      })
    }
    return [String(props.value).trim()]
  } else {
    return []
  }
})

const viewTags = computed(() => {
  const options = props.options
  if (!options) return []
  let showTags: any[] = []
  options.forEach((item: any) => {
    const key = String(item.value).trim()
    console.log("item", item)
    if (valueList.value.includes(key)) {
      showTags.push(item)
    }
  })
  if(!showTags.length){
    showTags.push({
      label: "-",
      value: "-"
    })
  }
  return showTags
})

defineComponent({
  name: "DictTag"
})
</script>

<template>
  <div class="dict_tag_box">
    <el-space :size="size">
      <template v-for="(item, index) in viewTags" :key="index">
        <el-tag v-if="!noTag" :type="item.type || 'primary'" effect="light">{{ item.label }}</el-tag>
        <span v-else>
          {{ item.label }}
        </span>
      </template>
    </el-space>
  </div>
</template>

<style scoped>
.dict_tag_box {
  display: block;
}
</style>

SelectOptions 组件的实现

功能描述

1. 传入字典 options。
2. 生成 select 组件的 option。

示例:

<template>
  <el-select v-model="value" placeholder="请选择">
    <!-- options 是一个数组，数组的每一项是一个对象，对象有 value 和 label 两个属性 -->
    <SelectOptions :options="options"/>
  </el-select>
</template>

代码示例:

loading

<Dicttag/>组件代码:

<script setup lang="ts">
import {defineComponent} from "vue";

defineProps({
  options: {
    type: Array,
    required: true
  }
})

defineComponent({
  name: "SelectOptions"
})
</script>

<template>
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</template>

<style scoped>

</style>