526互联

若依--字典标签组件完善

发布时间 2023-05-08 11:33:56作者: kitty0903

由于若依是基于element，但是在实际业务中，往往会出现标签不够用的情况，数据标签回显样式只有一下六种：

// 数据标签回显样式
const listClassOptions = ref([
  { value: "default", label: "默认" }, 
  { value: "primary", label: "主要" }, 
  { value: "success", label: "成功" },
  { value: "info", label: "信息" },
  { value: "warning", label: "警告" },
  { value: "danger", label: "危险" }
])

我优化了一下，使得不用填写也可以有标签颜色出现：

  1. statusFilter 方法
    // 数据标签颜色
    const statusFilter = function(status) {
    const statusMap = {
    0:"",
    1:'success',
    2:'info',
    3:'warning',
    4:'danger'
    }
    return statusMap[status%5]
    }
  2. 字典标签 dictTag.js
<template>
  <div>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.value)">
        <!-- <span
          v-if="item.elTagType == 'default' || item.elTagType == ''"
          :key="item.value"
          :index="index"
          :class="item.elTagClass"
        >{{ item.label }}</span> -->
        <!-- v-else -->
        <el-tag
          :disable-transitions="true"
          :key="item.value + ''"
          :index="index"
          :type="item.elTagType === 'primary' ? '' : (item.elTagType == '' ? statusFilter(item.elTagType) : item.elTagType)"
          :class="item.elTagClass"
        >{{ item.label }}</el-tag>
      </template>
    </template>
  </div>
</template>

<script setup>
import { statusFilter } from '@/utils/etax.js'
const props = defineProps({
  // 数据
  options: {
    type: Array,
    default: null,
  },
  // 当前的值
  value: [Number, String, Array],
})

const values = computed(() => {
  if (props.value !== null && typeof props.value !== 'undefined') {
    return Array.isArray(props.value) ? props.value : [String(props.value)];
  } else {
    return [];
  }
})

</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>