# 介绍
vue2-elment-dict是一款基于elment组件库部分组件配合请求字典数据接口形成的一个字典包。能够让您的项目经过一次配置，后续关于字典的使用更加简单方便。快速开始>>
# 优势
- 配置项多，更灵活，减少对后端接口入参及响应的依赖
- 可用组件多，很多组件（包含联级选项和树形控件树形选择器）均可一行代码直接使用
- 拥有字典过滤器方法
- 暴露出多种实用方法，字典相关，树形字典相关，日期格式化，脱敏等
- 性能优越，对于同个字典类型的请求，同时只会请求一次
- 适用场景多，嵌套iframe业务功能页也可使用
- 可配置版本，实现字典数据自动更新
- 使用缓存，减少请求，提升性能。
- 也可配置本地固定字典数据
- 可过滤或禁用部分字典数据
# 项目依赖
无，只需在使用前 引入 element 相应组件及样式即可
# 后端字典接口要求
可以请求单个或多个甚至全部字典类型数据
注意：此字典包可以对接口数据和接口请求进行配置，但是为了减少配置，后端尽可能按此包默认形式返回对前端更加友好。具体请求格式可以参照。目录结构>>中 模拟接口请求的形式。具体如下：
默认请求参数： {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-button--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
# 总结
vue2-elment-dict 真香，使用后大家都说好，更多经验分享可关注微信公众号【爆米花小布】
快速开始 →