el-check-tag-dict组件

仅用于标记，方便使用标记数据来源于字典时使用。如某某某状态对应某某某type的标记。 支持el-check-tag所有属性，事件及slot。 调用getRef() 返回el-check-tag实例

由type属性来选择tag的类型，type没传时默认primary类型，也可以通过color属性来自定义背景色。

<script setup lang="ts">
import { ref } from "vue";
const value1 = ref("001");
const value2 = ref("002");
const value3 = ref("003");
const value4 = ref("004");
const value5 = ref("005");

const checked = ref(false)

const onChange = (status: boolean) => {
  checked.value = status
}

//val 为字典数据值
const judgeTypeFun = (val: any) => {
  const typeObj: any = {
    "001": "danger",
    "002": "warning",
    "003": "info",
    "004": "success",
    "005": "primary",
  };
  return typeObj[val];
};
</script>
<template>
  <div class="el-check-tag-dict" ref="container">
    <div class="title">基础用法</div>
    <div class="normal-tag">
      <el-check-tag-dict dictType="PERSON_TYPE" :value="value1"></el-check-tag-dict>
      <el-check-tag-dict
        type="success"
        dictType="PERSON_TYPE"
        :value="value2"
        :checked="checked"
        @change="onChange"
      ></el-check-tag-dict>
      <el-check-tag-dict
        type="info"
        dictType="PERSON_TYPE"
        :value="value3"
      ></el-check-tag-dict>
      <el-check-tag-dict
        type="warning"
        dictType="PERSON_TYPE"
        :value="value4"
      ></el-check-tag-dict>
      <el-check-tag-dict
        type="danger"
        dictType="PERSON_TYPE"
        :value="value5"
      ></el-check-tag-dict>
    </div>

    <div class="title">使用函数</div>
    <div class="function-tag">
      <el-check-tag-dict
        :judgeTypeFun="judgeTypeFun"
        dictType="PERSON_TYPE"
        :value="value1"
      ></el-check-tag-dict>
      <el-check-tag-dict
        :judgeTypeFun="judgeTypeFun"
        dictType="PERSON_TYPE"
        :value="value2"
      ></el-check-tag-dict>
      <el-check-tag-dict
        :judgeTypeFun="judgeTypeFun"
        dictType="PERSON_TYPE"
        :value="value3"
      ></el-check-tag-dict>
      <el-check-tag-dict
        :judgeTypeFun="judgeTypeFun"
        dictType="PERSON_TYPE"
        :value="value4"
      ></el-check-tag-dict>
      <el-check-tag-dict
        :judgeTypeFun="judgeTypeFun"
        dictType="PERSON_TYPE"
        :value="value5"
      ></el-check-tag-dict>
    </div>
  </div>
</template>

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

显示代码

Check Tag Dict Attributes

参数	说明	类型	可选值	默认值
dictType	必传，传递字典类型	String	—	—
value	必传，数据值	[String, Number]	—	—
type	选传，默认 primary judgeTypeFun优先级更高	String	primary，success，info，warning，danger	primary
judgeTypeFun	选传，不传则获取type配置，所以未返回值时默认primary	Function	—	type的类型

注意：如此组件满足不了需求，可直接使用el-check-tag原生组件，查阅原生组件文档 (opens new window)