vue3-element-dict

vue3-element-dict是在vue3框架下对element-plus组件库的部分组件进行二开，实现更轻松使用字典数据的字典包插件。引入此包后，可轻松实现select下拉选项，radio单选框，checkbox多选框，cascader联级选项，tree树形控件，tree-select树形选项，table-column等组件。拥有多种字典相关方法及日期格式化，脱敏等方法。 详细阅读官方使用文档题

微信公众号

抖音号

微信赞助

开发不易，如果对您有所帮助，可赞助作者，利于官网服务器运营。您的支持，是我继续努力的最大动力。

更新日志

3.3.5

1. 【新增】新增暴露getTreePathByValue、treeToList方法

3.3.4

1. 【优化】修复防抖和节流函数ts未声明问题

3.3.3

1. 【修复】修复dict-checkbox组件全选功能无效的问题

2. 【优化】动态组件及动态搜索组件新增样式，免去设置输入框等组件100%宽度的样式

3.3.2

1. 【修复】修复项目为按需引入时，dict-autocomplete-email组件无法使用的问题

2. 【优化】v-close-dropdown自定义指令默认值优化, 新增classNameList，接受的参数是数组类型时则为配置classNameList，弹出框的类名选择器，需要加., 如[".xiaobu-popper"]。 如果是配置整个对象时，classNameList还支持字符串（多个时使用英文逗号分隔）

{
  isWindow: true, // 默认true 监听window窗口的滚动 布尔类型时为配置 isWindow
  distance: 50, // 默认滚动50像素后才关闭弹出框 数字类型时为配置distance
  classNameList: [".el-popper"] // 用于一些非element-plus组件的弹出框，能够隐藏弹出框
}

3. 【优化】dict-auto-height组件优化，原先的excludes属性改为listenDoms表示需要监听高度变化的dom对象，新增excludeDoms属性，表示组件内部需要排除掉的dom对象，得出来的高度就会扣除这些dom对象的高度（margin不会被计算在内，因此这些dom尽量别使用margin）。存在偏差时可配置offset属性，表示需要扣除的高度，默认为0。

3.3.1

1. 【新增】新增v-close-dropdown自定义指令，实现滚动时关闭弹出框，接受对象，布尔值，数字类型参数。

{
  isWindow: true, // 默认true 监听window窗口的滚动 布尔类型时为配置 isWindow
  distance: 50 // 默认滚动50像素后才关闭弹出框 数字类型时为配置distance
}

2. 【优化】debounce方法新增一个参数，用于配置立即触发时，方法是否只触发最开始的一次。

3. 【新增】新增dict-autocomplete-email邮箱输入组件

4. 【修复】校验方式使用compare时对日期格式数据也进行切换，运算符比较使用calculate时修复非${}包裹的元素不会进行日期时间戳转化的问题

5. 【新增】新增dict-auto-height组件，用于自动计算元素高度撑满剩余空间，例如配合el-table实现表格高度自适应

3.3.0

1. 【优化】dict-dynamic-search组件新增rules、idField属性配置，list的选项配置新增hidden、visible、showRules、showRuleType、validatorRuleType配置，实现表单联动及快捷校验。同dict-dynamic-components组件。

2. 【优化】修复dict-dynamic-components组配置showRuleType为validate且showRules配置校验多个字段时，如sex,name, name本身存在错误提示，sex改变时会移除name的校验的问题，重置按钮功能做了优化

3.2.9

1. 【修复】修复dict-dynamic-search组件在弹窗中使用时，会因为其防抖延迟导致宽度占比变化造成高度变化，影响视觉的问题，新增debounceTime防抖时间配置，默认300ms，新增debounceImmediate防抖时，是否立即先执行一次方法的配置，默认为true

3.2.8

1. 【优化】修复dict-dynamic-search组件新增expandOnNoEmptySearch、expandOnError、foldOnReset属性配置，expandOnNoEmptySearch实现控制隐藏的搜索框存在值时是否自动展开，默认为true，expandOnError配置是否有报错时就展开，默认false。注意：隐藏字段存在校验错误时自动展开。foldOnReset重置时是否自动收起，默认true。

2. 【优化】修复dict-dynamic-search组件新增expandText、foldText、searchText、resetText属性配置，实现配置展开、收起、查询、重置按钮文字，默认展开、收起、查 询、重置

3.2.6

1. 【优化】修复dict-dynamic-search组件新增modelValue配置，实现数据双向绑定，取值更轻松，得使用ref 不能使用reactive

2. 【优化】修复dict-dynamic-search组件reset无效问题

3. 【优化】修复dict-dynamic-search组件新增rows配置，实现配置搜索条件显示占几行

4. 【优化】修复dict-dynamic-search组件underline配置为false 导致的控制台警告问题

5. 【优化】修复dict-dynamic-search组件监听视口宽度防抖一下

3.2.1

1. 【优化】修复展开和收起文字样式问题及图标为展示问题

3.2.0

1. 【优化】dict-dynamic-search组件优化，媒体查询由根据浏览器窗口改为根据搜索栏宽度，清除浮动，且list配置的组件可继承插槽，新增prepend、prefix、button-suffix、button-prepend插槽 并且多返回如下值

:searchForm="searchForm" :fold="fold" :itemsPerRow="itemsPerRow"

3.1.9

1. 【优化】新增timeout配置，解决字典数据请求方法请求超时问题

2. 【新增】新增dict-dynamic-search组件用于动态渲染搜索条件

3.1.8

1. 【优化】修复radio、checkbox、radio-button、checkbox-button组件的disabled属性配置无效问题

2. 【新增】新增checkable-tag组件

3. 【优化】实现select组件没值时，悬浮和聚焦 不显示清除图标

4. 【优化】checkbox组件addAllText属性时，新增右边距

5. 【修复】修复checkbox组件校验不会触发的问题

6. 【修复】修复动态组件无法触发校验的问题，修复动态组件Placeholder显示label为null的问题，修改动态组件默认渲染值由原来的formData改为组件配置里面的modelValue值，null兜底

7. 【修改】动态表头组件名称由原先的DictDynamicHeaderTable（废弃） 改为现在的 DictDynamicTableHeader

3.1.6

1. 【优化】解决配置usuallyGetDictTypes时仍会请求多个接口问题

2. 【优化】解决页面上使用getDictObjByDictTypes方法和字典组件时会请求多个接口的问题

3. 【优化】JSON.parse(浏览器缓存数据)出错时捕获异常

3.1.5

1. 【优化】字典配置新增 delayTime 属性（单位：毫秒，默认值：null），用于配置延迟响应时间。当设置为非 null 值（如 300）时，启用防抖合并请求：在指定延迟时间内，将多个字典类型请求合并，延迟结束后统一调用批量接口一次性获取所有字典数据。

​ 注意：为了支持还有部分后端人员开发的接口不支持请求多个字典类型，此版本将delayTime设置为null，避免版本更新导致这些用户报错而不知所措。后续版本可能会把默认值改为300,请提前知悉。

3.1.3

1. 【优化】项目初始化时，若字典版本号与缓存不一致，将批量请求缓存中所有需通过接口获取的字典类型数据，并更新本地缓存。

2. 【优化】完善 package.json 类型入口配置，修复 TS 类型无法正确加载问题

3.1.2

1. 【优化】ElDescriptionsDict新增list新增dictOptions对象配置直接配置字典相关的配置

2. 【优化】日期格式兼容 ISO 8601 日期时间格式

3. 【修复】修复自定义日期方法时，传递日期格式无效问题

3.1.1

1. 【优化】解决项目按需加载时的问题，提示未引入element-plus组件的问题

3.1.0

1. 【修改】新增componentsPreFix配置，配置组件名称的前缀，默认为Dict，组件名称由原来的在element组件名称的基础上添加后缀-dict改为替换el为${componentsPreFix}

2. 【优化】table-column、dynamic-header-table、descriptions、descriptions-item组件修复其使用tag、button、text、link等组件时不支持多个的问题。

3. 【优化】dynamic-components组件优化配置colon及Placeholder的问题

3.0.5

1. 【优化】兼容数字类型字典值转化

2. 【优化】checkbox组件全选样式有值初始化时未及时更新的问题

3.0.3

1. 【新增】el-radio-dict、el-radio-button-dict、el-tabs-dict组件新增addAllText属性，实现选项头部多添加一个addAllText配置值的选项，选项值为空字符串

2. 【优化】el-select-dict组件keyValue属性配置为true时 由原先绑定值为对象 改为绑定值为字符串或数字, 新增addAllText属性,有配置值时选项头部插入一个addAllText配置值的选项，值为空字符串. 多选时addAllText属性无效，配置addAllText后 empty-values及value-on-clear属性配置无效

3. 【优化】el-checkbox-dict组件新增addAllText属性,有配置值时选项头部插入一个addAllText配置值的选项，实现全选的功能。

4. 【优化】el-tabs-dict插槽名由原先的值既可改为tabs-item-值，addAllText属性配置的插槽名则为tabs-item

3.0.2

1. 【新增】新增ElDynamicHeaderTable动态表头组件

2. 【修复】调整几处细微的逻辑和样式细节

3.0.1

1. 【修复】修复动态表单组件隐藏的表单变成显示后会校验错误的问题

3.0.0

1. 【新增】新增ElInputDict、ElDynamicComponentsDict、ElDescriptionsDict、ElButtonsDict组件

2. 【优化】原disableObj字段配置改为disabledObj, 原先disableObj对象中的disableValue改为disabledValues

3. 【优化】新增mask全局配置，用于替换字典包内置的脱敏方法

4. 【优化】字典包配置项新增mask、formatDate、validator、dynamicComponentsConfig四个配置项用于新增或覆盖自定义脱敏方法、日期格式化方法、表单校验方法、动态组件配置。

5. 【修复】调整几处细微的逻辑和样式细节

2.1.2

1. 【优化】usuallyGetDictTypes配置了localDictCodes重复的字典类型时，给出警告，并且过滤掉本地存在的字典类型。

2. 【优化】dictConfig新增getLoginStatusFunc()字段，配置获取登录状态（即有无登录凭证）的方法，return true为已登录，false为未登录，默认值为 return true

3. 【优化】dictConfig新增loginStatusChangeFunc(val)字段，登录状态改变时的回调方法 val 为 true 为已登录，false为未登录。默认值为null

4. 【优化】解决当获取字典值接口需要登录凭证时，配置了isGetAll为true或者有配置usuallyGetDictTypes时，立马调用获取字典接口会报错的bug。此版本会待getLoginStatusFunc()配置的值返回true时才会触发获取字典接口。

5. 【优化】修复el-radio和el-checkbox相关字典组件控制台会提示 [API] label act as value is about to be deprecated in version 3.0.0, please use value instead.的问题

2.1.1

1. 【优化】修复 el-checkbox-dict 组件配置keyValue属性时，选择多个时 dictChange事件返回值错误问题

2.1.0

1. 【优化】FormatDate 兼容4、6、8、10、14位连续数字字符串或数字格式
2. 【优化】修复 使用 await GetDictObjByDictTypes 方法时 无法 顺延继续获取接口的bug GetDictObjByDictTypes 新增return Promise
3. 【优化】修复GetDictObjByDictTypes获取的字典数据会产生undefined: true/false的问题
4. 【优化】GetLabelByCodesFilter(vals, type, options) options新增emptyText属性配置，用于options未设置defaultVal时，vals中的某一项有值则显示该值，无值显示emptyText，emptyText默认值为“--”
5. 【优化】GetTreeLabelByCodesFilter(vals, type, options) options新增emptyText属性配置，用于options未设置defaultVal时，vals中的某一项有值则显示该值，无值显示emptyText，emptyText默认值为“--”
6. 【优化】el-tabel-column组件新增emptyText属性配置，用于dictType类型或dictTreeType类型且未设置defaultVal时，可实现有值但是找不到对应字典类型则显示该值，为空时则显示emptyText， emptyText 默认值为“--”
7. 【优化】姓名脱敏优化，新增复姓，慕容云海 =》 慕容+海 欧阳锋 =》 欧阳+ 沈小布 =》 沈+布 王涛 =》 王+
8. 【优化】树形数据过滤器及方法间隔符有 ， 改为 /
9. 【优化】el-select-dict、el-radio-dict、el-radio-button-dict、el-checkbox-dict、el-checkbox-button-dict、el-tabs-dict组件新增data属性配置自定义选项数据，format属性配置自定义选项格式

2.0.8

1. 【优化】GetDictObjByDictTypes方法优化
2. 【优化】el-table-column-dict组件的 dictTypeNode 和makeType允许传入空字符串

2.0.6

1. 【优化】el-cascader-dict组件的props属性新增idField字段配置用于配置数组数据根据什么id字段转化为树形结构数据
2. 【优化】el-cascader-dict组件的值的配置字段从原先的treeSetting.idField 改为现在的 format.value 配置
3. 【优化】treeSetting.idField配置作用改为仅用于数组转树形结构判断依据使用

const setting:any = computed(() => {
  const props:any = attrs.props??{}
  props.disabled = props.disabled??dictConfig.format.disabled
  props.value = props.value??dictConfig.format.value
  props.label = props.label??dictConfig.treeSetting.labelField
  props.children = props.children??dictConfig.treeSetting.childrenField
  props.leaf = props.leaf??dictConfig.treeSetting.leafField
  return props
})
const options = computed(() => {
  const props:any = attrs.props??{}
  const newProps = {
    idField: props.idField??dictConfig.treeSetting.idField,
    labelField: props.label??dictConfig.treeSetting.labelField,
    childrenField: props.children??dictConfig.treeSetting.childrenField,
    leafField: props.leaf??dictConfig.treeSetting.leafField
  }
  const treeSetting = Object.assign(dictConfig.treeSetting, newProps) as OptionalTreeSetting
  const treeArr = JSON.parse(JSON.stringify(data.list))

  const treeData = ListToTree(treeArr, treeSetting)
  // 限制层级
  if (maxLevel) {
    filterLevel(treeData, +maxLevel)
  }
  return treeData
})

2.0.5

1. 【修复】修复同个页面使用同个字典类型时，只有第一个组件会渲染数据的bug

2.0.3 (废弃)

1. 【修复】修复同个页面使用同个字典类型时，只有第一个组件会渲染数据的bug

2.0.2

1. 【优化】新增 getDictData 和 getDictDataByKey 两个获取字典数据方法

2.0.1

1. 【修复】修复字典包全局配置 filterDataFun 和 disabledDataFun配置无效问题

2.0.0

vue3-element-dict发布