el-tag-dict组件

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

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

<template>
  <div class="el-tag-dict" ref="container">
    <div class="title">基础用法</div>
    <div class="normal-tag">
      <el-tag-dict dictType="PERSON_TYPE" :value="value1"></el-tag-dict>
      <el-tag-dict type="success" dictType="PERSON_TYPE" :value="value2"></el-tag-dict>
      <el-tag-dict type="info" dictType="PERSON_TYPE" :value="value3"></el-tag-dict>
      <el-tag-dict type="warning" dictType="PERSON_TYPE" :value="value4"></el-tag-dict>
      <el-tag-dict type="danger" dictType="PERSON_TYPE" :value="value5"></el-tag-dict>
    </div>

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

<script>
export default {
  data() {
    return {
      value1: "001",
      value2: "002",
      value3: "003",
      value4: "004",
      value5: "005"
    }
  },
  mounted() {},
  methods: {
    //val 为字典数据值
    judgeTypeFun(val) {
      const typeObj = {
        "001": "danger",
        "002": "warning",
        "003": "info",
        "004": "success",
        "005": "primary"
      }
      return typeObj[val]
    }
  }
}
</script>

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

显示代码

Tag Dict Attributes

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

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