# 介绍
vue3-elment-dict是一款基于elment-plus组件库部分组件配合请求字典数据接口形成的一个字典包。能够让您的项目经过一次配置，后续关于字典的使用更加简单方便。快速开始>>
# 优势
- 配置项多，更灵活，减少对后端接口入参及响应的依赖
- 可用组件多，很多组件（包含联级选项和树形控件树形选择器）均可一行代码直接使用
- 拥有字典过滤器方法
- 暴露出多种实用方法，字典相关，树形字典相关，日期格式化，脱敏等
- 性能优越，对于同个字典类型的请求，同时只会请求一次
- 适用场景多，嵌套iframe业务功能页也可使用
- 可配置版本，实现字典数据自动更新
- 使用缓存，减少请求，提升性能。
- 也可配置本地固定字典数据
- 可过滤或禁用部分字典数据
# 项目依赖
无，只需在使用前 引入 element-plus 相应组件及样式即可
# 后端字典接口要求
可以请求单个或多个甚至全部字典类型数据
注意：此字典包可以对接口数据和接口请求进行配置，但是为了减少配置，后端尽可能按此包默认形式返回对前端更加友好。具体请求格式可以参照。目录结构>>中 模拟接口请求的形式。具体如下：
- 默认请求参数： {dictType: ""} dictType为空返回全部字典值
- 获取多个字典 请求参数 {dictType: "AAC004,AAC005"} 英文逗号隔开
如果接口与字典包不符，可参照字典包配置项>>
# 组件及方法
组件
el-select-dict 下拉组件
el-radio-dict 单选框组件
el-radio-button-dict 单选框按钮样式组件
el-checkbox-dict 复选框组件
el-checkbox-button-dict 复选框组件按钮样式
el-tabs-dict tabs栏组件
el-table-column-dict 表格列组件
el-cascader-dict 联级选项组件
el-tree-dict 树形控件组件
el-tree-select-dict 树形选择器组件
el-button--dict 按钮组件
el-check-tag-dict 标签栏组件
el-link-dict link组件
el-tag-dict 标签组件
el-text-dict text文字组件
过滤器：字典过滤方法 函数形式调用
getLabelByCodeFilter
getLabelByCodesFilter
getCodeByLabelFilter
getCodeByLabelsFilter
getTreeLabelByCodeFilter
getTreeLabelByCodesFilter
getTreeCodeByLabelFilter
getTreeCodeByLabelsFilter
方法
普通方法 函数
getDictConfig
getDictConfigByKey
字典相关 promise方法
getLabelByCode
getLabelByCodes
getCodeByLabel
getCodeByLabels
getTreeLabelByCode
getTreeLabelByCodes
getTreeCodeByLabel
getTreeCodeByLabels
日期格式化 函数
formatDate
isDate
脱敏相关 函数
mask
maskAddress
maskIdCard
maskName
maskPhone
desensitization
树形结构相关 函数
listToTree
getTreeItemByCode
getTreeItemByLabel
# 总结
vue3-elment-dict 真香，使用后大家都说好，更多经验分享可关注微信公众号【爆米花小布】
快速开始 →