el-tabs-dict组件

支持el-tabs所有属性及方法， 支持el-tab-pane插槽配置，调用getRef() 返回 el-tabs 实例

TIP

如果需要监听change事件，可使用dictChange代替 dictChange方法返回值与keyValue配置有关.如果需要更高级的用法请阅读el-tabs文档 (opens new window)

dictType 传递字符串类型，同时此组件可以接收el-select所有属性及事件,change事件建议采用dictChange代替。

<script setup lang="ts">
import {ref} from "vue"
const value1 = ref("")
const value2 = ref("")
const value3 = ref("")
const value4 = ref("")
const value5 = ref("")
const value6 = ref("001")
const value7 = ref("002")
const badgeObj = ref({
        "001": {
          isDot: false,
          value: 12,
          type: "info",
          max: 9
        },
        "002": {
          isDot: false,
          value: "new"
        },
        "003": {
          isDot: true,
          value: ""
        },
        "004": {
          isDot: false,
          value: "hot",
          hidden: true
        }
      })

const dictChange = (val: any) => {
  console.log("🚀 ~ file: App.vue:5 ~ dictChange ~ val:", val)
}

const filterDataFun = (list: []) => {
  return list.filter((item: {value: any}) => {
    return item.value === "001" || item.value === "002"
  })
}

//禁用数据
const disabledDataFun = (list: []) => {
  return list.map((item: {value: any}) => {
    return {
      ...item,
      disabled: !!(item.value === "001" || item.value === "002")
    }
  })
}
</script>
<template> 
  <div class="el-tabs-dict" >
    <div class="title">基础用法</div>
    <el-tabs-dict @dictChange="dictChange" clearable v-model="value1" dictType="PERSON_TYPE"></el-tabs-dict>
    
    <div class="title">过滤数据</div>
    <el-tabs-dict @dictChange="dictChange" :badgeObj="badgeObj" clearable v-model="value2" :dictType="{type: 'PERSON_TYPE', filters: '001,002'}"></el-tabs-dict>
    <el-tabs-dict @dictChange="dictChange"  clearable v-model="value3" :filterDataFun="filterDataFun" dictType="PERSON_TYPE"></el-tabs-dict>
    
    <div class="title">禁用数据</div>
    <el-tabs-dict @dictChange="dictChange" :badgeObj="badgeObj" dictType="PERSON_TYPE" clearable v-model="value4" :disableObj="{disableValue: '001,002'}"></el-tabs-dict>
    <el-tabs-dict @dictChange="dictChange" dictType="PERSON_TYPE" :disabledDataFun="disabledDataFun" clearable v-model="value5"></el-tabs-dict>
   
    <div class="title">配置keyValue及赋值</div>
    <el-tabs-dict @dictChange="dictChange" clearable v-model="value6" dictType="PERSON_TYPE"></el-tabs-dict>
    <el-tabs-dict @dictChange="dictChange" :keyValue="true" clearable v-model="value7" dictType="PERSON_TYPE"></el-tabs-dict>

    <div class="title">配置角标</div>
    <el-tabs-dict @dictChange="dictChange" :badgeObj="badgeObj" clearable v-model="value7" dictType="PERSON_TYPE"></el-tabs-dict>
  </div>
</template>

<style>
.el-tabs-dict .el-tabs + .el-tabs {
  margin-top: 20px;
}

</style>

显示代码

Tabs Dict Attributes

参数	说明	类型	可选值	默认值
dictType	必传，传递字典的字段名，选择想要的字典数据Object类型时详看如下配置dictType配置项	[String, Object]	—	—
disableObj	选填，配置disableObj配置项	Object	—	false
keyValue	选填，默认false false时dictChange事件只返回值，true返回value及label	Boolean	—	false
filterDataFun	组件过滤数据方法函数 接收该字典类型的数据 默认不变 不能覆盖字典包配置里的filterDataFun，是二次过滤	Function	—	(list) => { return list }
disabledDataFun	组件禁用数据方法函数 接收该字典类型的数据 默认不变 不会覆盖字典包配置里的disabledDataFun，是对其二次禁用	Function	—	(list) => { return list }
badgeObj	角标对象配置badgeObj配置项	Object	—	{}

Tabs Dict Events

参数	说明	回调参数
dictChange	选中值发生变化时触发	keyValue为false时返回值，为true时返回键值对象

dictType配置项

参数	说明	类型	可选值	默认值
type	必传，字典类型	String	—	—
filters	必传，过滤数据（数组,或者字符串用英文逗号隔开）将选项过滤部分数据，使其不展示	[String，Array]	—	—
filterType	过滤的字段（通过这个字段筛选数据）, 默认字典配置的 dict-config中format的value配置项	String	—	默认字典配置的 dict-config中format的value配置项
reverse	是否反向筛选	Boolean	true	false

disableObj配置项

参数	说明	类型	可选值	默认值
disableValue	禁用数据（数组,或者字符串用英文逗号隔开）	[String，Array]	—	—
disableType	过滤的字段（通过这个字段筛选数据）, 默认字典配置的 dict-config中format的value配置项	String	—	默认字典配置的 dict-config中format的value配置项
reverse	是否反向筛选	Boolean	true	false

badgeObj配置项

参数	说明	类型	可选值	默认值
isDot	小圆点	boolean	—	false
value	显示值	string, number	—	—
type	类型	string	primary / success / warning / danger / info	—
max	最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型	number	—	—
hidden	隐藏 badge	boolean	—	false