# el-select-dict组件

支持配置el-select所有属性,事件及slot,使用getRef()方法可返回el-select实例,可用getRef()调用其方法。

TIP

如果需要监听change事件,可使用dictChange代替 dictChange方法返回值与keyValue配置有关

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

dictType 传递对象类型 filters 可传递数组形式,也可字符串形式,英文逗号隔开,不可以有空格

disableObj 传递对象类型, disableValue 可传递数组形式,也可字符串形式,英文逗号隔开,不可以有空格

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

interface DictValue {
  value: string;
  label: string;
  [key: string]: any;
}
const value7 = ref<DictValue>({
  value: "001",
  label: "企业法人",
});
const value8 = ref<string[]>(["001", "002"]);
const value9 = ref<DictValue[]>([
  {
    value: "001",
    label: "企业法人",
  },
  {
    value: "002",
    label: "社团法人",
  },
]);

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-select-dict">
    <div class="title">基础用法</div>
    <el-select-dict
      @dictChange="dictChange"
      clearable
      v-model="value1"
      dictType="PERSON_TYPE"
    ></el-select-dict>
    <el-select-dict
      @dictChange="dictChange"
      clearable
      v-model="value1"
      dictType="PERSON_TYPE"
    ></el-select-dict>

    <div class="title">过滤数据</div>
    <el-select-dict
      @dictChange="dictChange"
      clearable
      v-model="value2"
      :dictType="{ type: 'PERSON_TYPE', filters: '001,002' }"
    ></el-select-dict>
    <el-select-dict
      @dictChange="dictChange"
      clearable
      v-model="value3"
      :filterDataFun="filterDataFun"
      dictType="PERSON_TYPE"
    ></el-select-dict>

    <div class="title">禁用数据</div>
    <el-select-dict
      @dictChange="dictChange"
      dictType="PERSON_TYPE"
      clearable
      v-model="value4"
      :disableObj="{ disableValue: '001,002' }"
    ></el-select-dict>
    <el-select-dict
      @dictChange="dictChange"
      dictType="PERSON_TYPE"
      :disabledDataFun="disabledDataFun"
      clearable
      v-model="value5"
    ></el-select-dict>

    <div class="title">配置keyValue及赋值</div>
    <el-select-dict
      @dictChange="dictChange"
      clearable
      v-model="value6"
      dictType="PERSON_TYPE"
    ></el-select-dict>
    <el-select-dict
      @dictChange="dictChange"
      :keyValue="true"
      clearable
      v-model="value7"
      dictType="PERSON_TYPE"
    ></el-select-dict>
    <el-select-dict
      @dictChange="dictChange"
      multiple
      clearable
      v-model="value8"
      dictType="PERSON_TYPE"
    ></el-select-dict>
    <el-select-dict
      @dictChange="dictChange"
      multiple
      :keyValue="true"
      clearable
      v-model="value9"
      dictType="PERSON_TYPE"
    ></el-select-dict>
  </div>
</template>

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

显示代码

# Select Dict Attributes

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

# Select 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
上次更新: 5/12/2023, 1:10:57 AM