【无标题】基于 Element UI Select 组件封装的字典选择器 el-select

数据字典下拉框组件

注: JSelect组件是一个基于 Element UI Select 组件封装的字典选择器。通过传入数据字典名称，自动从本地存储或远程获取数据字典选项列表，实现快速选择字典数据的功能。

使用方法

在 Vue 项目中引入 JSelect 组件 并在components声明

import JSelect from "@/components/JSelect.vue";

components: {
   
   
  JSelect
}

也可以在全局注册 找到main.js文件

import JSelect from "@/components/JSelect/JSelect.vue";

Vue.component('JSelect', JSelect);

基本使用

<JSelect
  v-model="selected"
  name="dictionary_name"
  filterable
  clearable
  placeholder="请选择"
/>

• v-model：用于双向绑定已选中的值
• name：数据字典的名称，必填项
• filterable：是否支持过滤选项，默认为 true
• clearable：是否支持清空已选项，默认为 true
• placeholder：输入框默认占位文本
• 需要注意的是，组件的 value 属性和 v-model 属性不要同时使用

::: tip 温馨提示

• JSelect 组件需要传入数据字典的名称作为 name 属性，因此在使用组件前需要确认该数据字典是否存在。
• JSelect 组件在获取数据字典时，首先会尝试从本地缓存获取，如果不存在则会调用远程接口获取。因此需要确保数据字典已经被加载到本地缓存中。
• JSelect 组件内部使用了 Element UI 的 Select 组件，因此支持 Select 组件的所有 Props、Slots 和 Events。如果需要对 Select
  组件进行更深层次的修改，可以在 JSelect 组件内部通过 v-bind=“$attrs"和v-on="$listeners” 将原生的 Props 和 Events 传递到
  Select 组件中。
  :::

完整组件内容

<template>
  <el-select
    v-model="selected"
    v-bind="$attrs"
    v-on="$listeners"