vue-element-dict文档说明

前言

作为前端开发，大家肯定经常遇到一些下拉选项，如性别，男，女、编码转化为中文等。通常情况下，后端是会有个接口来获取这些编码表的值的，否则的话就得在前端项目写死，不易于维护。因此前端每次需要用到的时候就得调用接口获取该字典类型的值。开发此插件的目的就是将使用简洁化。此字典包不会同时请求相同字典，避免了重复请求问题。可放心大胆使用。如发现问题，通过微信公众号【爆米花小布】进行反馈！谢谢。

注意: 也可前往 vue-element-dict官网阅读使用说明

优点

配置说明详细，可满足绝大多数情况使用
配置数据版本号，无需清理缓存，可实现数据自动更新
多个地方同时获取相同类型数据，只会触发一个请求
配套多种element组件，方便使用
对于一些页面需要过滤掉部分选项也可进行配置
配套多种过滤器，过滤数据快捷方便，
对于找不到或者没值的情况可设置缺省值
可配置项多，灵活，方便
适用于主项目，也适用于子项目开发
解决了当想要获取的字典字段不存在时疯狂报错的问题

缺点

局限于vue项目

项目依赖

element组件
day.js

已有组件

el-select-dict组件

el-radio-dict组件

el-radio-button-dict组件

el-checkbox-dict组件

el-checkbox-dict组件

el-table-column-dict组件

el-tabs-dict组件

el-tag-dict组件（0.0.8及以上版本）

已有过滤器

getLabelByCode(val, type, defaultVal = "") 通过code值获取label

getLabelByCodes(vals, type, defaultVal = "", formatFun) 通过codes值获取label

vals 可接受数组形式或字符串英文逗号隔开形式 “1,2,3”

formatFun = function(arr){ //默认转化 “男,女”

return arr.map(item => {

return item[format.label]

}).join(",")

}

getCodeByLabel 通过label值获取code

getCodeByLabels 通过labels值获取code

vals 可接受数组形式或字符串英文逗号隔开形式 “1,2,3”

formatFun = function(arr){ //默认转化 “男,女”

return arr.map(item => {

return item[format.value]

}).join(",")

}

dayFormat(day, format, defaultValue = "") 格式化日期依赖于day.js 插件

date: "YYYY-MM-DD",

month: "YYYY-MM",

datetime: "YYYY-MM-DD HH:mm:ss",

time: "HH:mm:ss",

year: "YYYY"

format 可传上述自定义好的类型，也可自行传递格式

defaultValue Invalid Date的时候会返回默认值

desensitization

已有方法

Vue.prototype.$getLabelByCode promise 参数同上述同名过滤器
Vue.prototype.$getCodeByLabel promise 参数同上述同名过滤器
Vue.prototype.$getLabelByCodes promise 参数同上述同名过滤器
Vue.prototype.$getCodeByLabels promise 参数同上述同名过滤器
Vue.prototype.$dayFormat function 参数同上述同名过滤器
Vue.prototype.$desensitization function 参数同上述同名过滤器
Vue.prototype.$message function 用法同element，解决其消息提醒的不足

安装

npm install -S vue-element-dict

引入

//引入element的css 如果已引入 可不要重复引入
import "element-ui/lib/theme-chalk/index.css"
import {getGlobalConfigApi} from "@/api/module/common-api.js"
import dictSetting from "@/dict-setting.js"
const vueElementDict = require("vue-element-dict")
//获取当前版本号
getGlobalConfigApi().then(data => {
  const {verssion} = data
  Object.assign(dictSetting, {verssion})
  Vue.use(vueElementDict, dictSetting)
  new Vue({
    render: h => h(App)
  }).$mount("#app")
})

上述是正常的配置，如果一些项目只是提供页面，且每次想要一次性请求多个字典数据，您可以如下使用

//main.js
import Vue from "vue"
//引入element的css
import "element-ui/lib/theme-chalk/index.css"
import {getGlobalConfigApi} from "@/api/module/common-api.js"
import dictSetting from "@/dict-setting.js"
//获取当前版本号
getGlobalConfigApi().then(data => {
  const {verssion} = data
  Object.assign(dictSetting, {verssion})
  Vue.prototype.$dictSetting = dictSetting
  new Vue({
    render: h => h(App)
  }).$mount("#app")
})

//页面上
import Vue from "vue"
const vueElementDict = require("vue-element-dict")
export default {
    beforeCreate() {
        const setting = {
          // isGetAll: true,
          usuallyGetFileds: "UNIT_TYPE,AAC005,AAC058,AAC004" //页面上有用到的数据
          // getDictEveryTime: true
        }
        const dictSetting = Object.assign(this.$dictSetting, setting)
        Vue.use(vueElementDict, dictSetting)
    }
}

// @/assets/data/dict.js   本地写死字典数据
export default {
  gender: [
    {
      "value": "000",
      "label": "注销"
    }, {
      "value": "001",
      "label": "正常"
    }
  ]
}

//@/api/module/common-api.js

//获取字典接口 
export function getDictCodeApi(options) {
  var promise = new Promise(function(resolve) {
    const dictCodeList = {
      "AAC004": [{
        "value": "1",
        "label": "男"
      }, {
        "value": "2",
        "label": "女"
      }, {
        "value": "9",
        "label": "未说明性别"
      }],
      "STATUSHIERARCHY": [{
        "value": "5",
        "label": "Lv5认证"
      }, {
        "value": "4",
        "label": "Lv4认证"
      }, {
        "value": "3",
        "label": "Lv3认证"
      }],
      "AAC058": [{
        "value": "01",
        "label": "居民身份证(户口簿)"
      }, {
        "value": "02",
        "label": "中国人民解放军军官证"
      }, {
        "value": "03",
        "label": "中国人民武装警察警官证"
      }],
      "AAC005": [{
        "value": "01",
        "label": "汉族"
      }, {
        "value": "02",
        "label": "蒙古族"
      }, {
        "value": "20",
        "label": "傈傈族"
      }],
      "LEGAL_STATUS": [{
        "value": "000",
        "label": "锁定"
      }, {
        "value": "001",
        "label": "正常"
      }],
      "LEGAL_PERSON_TYPE": [{
        "value": "004",
        "label": "个体工商户"
      }, {
        "value": "003",
        "label": "机关事业单位法人"
      }, {
        "value": "002",
        "label": "社团法人"
      }, {
        "value": "001",
        "label": "企业法人"
      }],
      "UNIT_TYPE": [{
        "value": "3",
        "label": "地税编号"
      }, {
        "value": "2",
        "label": "统一信用代码"
      }, {
        "value": "1",
        "label": "组织机构代码"
      }],
      "MCC_TYPE": [{
        "value": "1",
        "label": "农,林,牧,渔业"
      }, {
        "value": "10",
        "label": "金融业"
      }, {
        "value": "11",
        "label": "房地产业"
      }],
      "UNIT_STATUS": [{
        "value": "000",
        "label": "注销"
      }, {
        "value": "001",
        "label": "正常"
      }]
    }

    let codeData = {}

    if (options&&options.type) {
      const typeList = options.type.split(",")
      for (let i = 0; i < typeList.length; i++) {
        const type = typeList[i]
        codeData[type] = dictCodeList[type]
      }
    } else {
      codeData = dictCodeList
    }
    const data = {
      "code": 0,
      "data": {
        dictCodeList: codeData,
        verssion: "0.0.1"
      },
      message: "成功",
      timestamp: "1594565635",
      type: "info"
    }
    setTimeout(() => { resolve(data) }, 1000)
  })
  return promise
}

//获取全局配置  包含版本号
export function getGlobalConfigApi() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({verssion: "0.0.1"})
    }, 1000)
  })
}

// @/dict-setting.js
import {getDictCodeApi} from "@/api/module/common-api.js"
import localDictCodes from "@/assets/data/dict.js"
export default {
    getDictCodeApi, //必传 获取字典数据接口
    // verssion: "0.0.1" //版本号 必传   版本号通过接口获取 不在此处配置
    localDictCodes, //选填 项目写死的字典数据
    ...  //剩余字段非必填，详看下列文档
}

dictSetting配置项说明

字段	类型	说明	默认值
getDictCodeApi	promise	必传，获取字典数据接口	无
verssion	String	必传，最新字典数据的版本号	无
query	String	获取字典数据接口传参的 key字段名	type
usuallyGetFileds	String	字符串，多个的话，英文逗号隔开，经常需要用到的字段，子项目非常适用此字段配置	""
verssionKey	String	存入浏览器缓存的当前版本号key字段名	currentVerssion
dictDataKey	String	存入浏览器缓存的字典数据key字段名	dictCodeList
format	Object	接口返回的数据的value和label字段名，value和label的 key不能改	{value: "value", label: "label"}
formatterRequest	function	对入参进行数据格式转化，将我们规定的格式，转化为后端人员接口期望传的参数默认格式	（query, data）=> {if(!data) {return {[query]:""}return [query]:""}}
formatterDictList	function	处理接口返回的数据，将返回数据处理成包期望的字典数据 data为接口返回的数据	（data，query）=> {return data.data.dictCodeList}
formatterDictVerssion	function	处理接口返回的数据，返回包期望的版本号 data为接口返回的数据	（data）=> {return data.data.verssion}
storage	window的对象	localStorage/ sessionStorage 浏览器缓存位置的配置	localStorage
isGetAll	Boolean	是否获取全部字典值	false
localDictCodes	Object	本地项目写死的字典数据	{}
getDictEveryTime	Boolean	是否每次进入页面都加载请求字典	false

接口返回数据示例值

{
      "code": 0,
      "data": {
        dictCodeList: {
          "AAC004": [{
            "value": "1",
            "label": "男"
          }, {
            "value": "2",
            "label": "女"
          }, {
            "value": "9",
            "label": "未说明性别"
          }]
        },
        verssion: "0.0.1"
      },
      message: "成功",
      timestamp: "1594565635",
      type: "info"
}

如果后端返回接口数据与上述返回示例不一致，无需祈求后端更改接口返回数据，可通过配置，将接口数据转化到可以用，详细咨询微信公众号【爆米花小布】喜欢作者点个关注

接口要求

返回数据格式尽可能按上述格式返回。
{type: ""} type为空返回全部字典值
传参格式 {type: "AAC004"} 默认type 如接口为非type 可通过 query配置
获取多个字典请求参数 {type: "AAC004,AAC005"} 英文逗号隔开
后端在后台管理系统修改字典数据时需要更改当前字典数据版本号
后端需提供一个获取当前字典数据版本号接口，可在获取全局配置接口上添加

备注：1、如果接口请求参数与包期望的不一致，可通过formatterRequest配置接收两个参数 query,data

2、如果后端不搞版本号，可将版本号写死，且通过formatterDictVerssion函数返回写死版本号

3、如果接口返回的数据格式与期望不一致，可通过formatterDictList返回期望的数据

4、format可配置label和value对应字段值

el-select-dict使用API

字段名	类型	备注
dictType	[String, Object]	必传，传递字典的字段名，选择想要的字典数据
disableObj（0.0.7及以上版本）	Object	选填，传递字典禁用选项配置
keyValue	Boolean	选填，默认false false只返回值，true返回value及label

接收el-select 所有饿了么原生参数配置及方法，由于组件使用到change方法，外部如需监听change事件，可用

@dictChange 监听如果在此组件使用@change监听，也可行但是会执行两次，因此不建议。

dictType对象类型时配置参数

{
	type: 字典类型,
  	filters： 过滤数据（数组,或者字符串用英文逗号隔开）,
	filterType: 过滤的字段（通过这个字段筛选数据）, 默认字典配置的 value
	reverse: 是否反向筛选  默认false
}

disableObj对象类型时配置参数（0.0.7及以上版本）

{
	disableValue: 禁用数据（数组,或者字符串用英文逗号隔开）,
	disableType: 过滤的字段（通过这个字段筛选数据）, 默认字典配置的 value
	reverse: 是否反向筛选  默认false
}

el-select-dict组件使用示例

<el-select-dict clearable v-model="select3" dictType="AAC058"></el-select-dict>

<el-select-dict clearable v-model="select1" :dictType="{type: 'LEGAL_PERSON_TYPE', filters: '004'}" :keyValue="true"></el-select-dict>

<el-select-dict filterable  :disableObj="{disableValue: ['16']}" :keyValue="false" @dictChange="change" :multiple="false" clearable v-model="select1" :dictType="{type: 'AAC058', filters: ['02','03','04','05','06','07','09','10','11','12','13'],reverse: true }"></el-select-dict>

【注意】el-radio-dict，el-radio-button-dict，el-checkbox-dict，el-checkbox-button-dict使用方法同上

el-tabs-dict使用API

字段名	类型	备注
dictType	[String, Object]	必传，传递字典的字段名，选择想要的字典数据
keyValue（0.0.6及以上版本）	Boolean	选填，默认false false只返回值，true返回value及label

接收el-tabs所有饿了么原生参数配置及方法，由于组件使用到change方法，外部如需监听change事件，可用**@dictChange** 监听如果在此组件使用@change监听，也可行但是会执行两次，因此不建议。

dictType对象类型时配置参数

{
	type: 字典类型,
	filters： 过滤数据（数组）,
	filterType: 过滤的字段（通过这个字段筛选数据）, 默认字典配置的 value
	reverse: 是否反向筛选  默认false
}

el-tabs-dict组件使用示例

<el-tabs-dict @dictChange="change" :keyValue="true" v-model="select1" dictType="UNIT_TYPE" ></el-tabs-dict>

<el-tabs-dict @dictChange="change" :keyValue="false" v-model="select1" :dictType="{type: 'UNIT_TYPE', filters: '001',reverse: true }" ></el-tabs-dict>

el-tag-dict使用API

字段名	类型	备注
dictType	String	必传，字典类型
value	String	必传，数据值
judgeTypeFun	Function	选传，不传则获取type配置，
type	String	选传，默认 primary judgeTypeFun优先级更高

el-table-colmun-dict组件API

字段名	类型	备注
dictType	String	如果传值会从字典数据获取，如果值为多个则返回英文逗号隔开的字符串可通过formatFun配置返回格式，当无数据是可通过defaultValue配置缺省值
spacer	String	默认 "," 返回多个字典数据时，配置返回数据中间间隔符
formatFun	Function	配置返回数据如何处理
defaultValue	String	默认“” 当找不到值时展示
dateFormat	String	日期格式化，可传入 date， month，datetime，time， year 也可以自定义格式，日期时间不对时显示defaultValue
desensitization	String，Number	脱敏已有类型 doNothing(不脱敏), mobile，name，address，idCard。如果数据没值将展示defaultValue。如果传入数字，则此字段将作为显示前几个的标识且必须传入desensitizationEnd
desensitizationEnd	Number	显示后几个
desensitizationPlaceholder	Number	中间占位符个数，不配置则根据实际被隐藏个数展示

各个过滤器使用说明

//日期格式化
//day  日期数值
//format  可选值  date， month，datetime，time， year   也可传自定义日期格式
//defaultValue   默认值（缺省值）
const dayFormat = (day, format, defaultValue = "")

//通过code获取label
//val  数据值
//type 字典类型
//defaultVal 缺省值
const getLabelByCode = (val, type, defaultVal = "")

//通过codes获取label
//val  数据值
//type 字典类型
//defaultVal 缺省值
//formatFun 转化格式 默认如下    如需自行配置，format.label最后从全局配置获取 避免写死
//spacer 默认 ","
formatFun = function(arr){
    return arr.map(item => {
        return item[format.label]
    }).join(",")
}
const getLabelByCodes = (vals, type, defaultVal = "", formatFun, spacer = ",")

//通过label获取code
//val  数据值
//type 字典类型
//defaultVal 缺省值
const getCodeByLabel = (val, type, defaultVal = "")

//通过labels获取code
//val  数据值
//type 字典类型
//defaultVal 缺省值
//formatFun 转化格式 默认如下    如需自行配置，format.label最后从全局配置获取 避免写死
const getCodeByLabels = (vals, type, defaultVal = "", formatFun, spacer = ",")

//通过字典类型获取该字典类型数据
//types  数组形式 或者  字符串英文逗号隔开  
// 返回字典数据值    如 {AAC004: [{},{}], AAC058: [{},{}]}
const getDictObjByDictTypes = (types)

//脱敏
//val  数据值
//type 脱敏类型  mobile，name，address，idCard  如果传数字则表示 展示前面几位数
//defaultVal 缺省值
//desensitizationEnd 显示后面几位
//desensitizationPlaceholder 中间多少个占位符，没传则根据实际长度展示长度
const desensitization = (val, type, defaultVal, desensitizationEnd, desensitizationPlaceholder)

上述过滤方法均可使用 this.$过滤器名调用该方法, 其中字典相关的方法为 promise 格式

  this.$getLabelByCode("000", "UNIT_STATUS", "啊哈哈哈").then(data => {
    console.log(data)
  })

  this.$getCodeByLabel("注销", "UNIT_STATUS", "啊哈哈哈").then(data => {
    console.log(data)
  })

  this.$getLabelByCodes("000,001", "UNIT_STATUS", "啊哈哈哈").then(data => {
    console.log(data)
  })

  this.$getCodeByLabels("注销,正常", "UNIT_STATUS", "啊哈哈哈").then(data => {
    console.log(data)
  })

  //获取字典数据方法
  this.$getDictObjByDictTypes(["PERSON_TYPE"]).then(data => {
    console.log(data)
  })

组件赋值须知

el-select-dict 组件如果 keyValue为true时赋值需要赋值 label 和 value 对象。如果还是多选则 [{label: XXX, value: XXX},{label: XXX, value: XXX}]

其余组件赋值均无需赋值对象多选组件赋值数组形式

文档过长，难免有写错的地方，敬请见谅。喜欢作者，请关注微信公众号【爆米花小布】了解更多前端经验

cascader使用方法**

属性配置

组件接收element所有属性，props与options属性分别替换为 settings 和 data属性

参数	说明	类型	默认值
settings	属性设置	Object	看后面具体参数配置
data	联级选项数据	Array	一些选项示例
maxLevel	限制到哪一层级（数据需要又层级标志）	String	“”
delValue	需要去除的部分选项，子级会一同去除	String 或者 Array	“”
delChildren	是否需要去除空 children	Boolean	false
showLength	是否展示子级数据量	Boolean	false

settings属性配置表

参数	说明	类型	默认值
level	限制层级的字段名	String	level
value	指定选项的值为选项对象的某个属性值	String	value
label	指定选项的值为选项对象的某个属性值	String	label
children	指定选项的值为选项对象的某个属性值	String	children
leaf	指定选项的叶子节点的标志位为选项对象的某个属性值	String	leaf
expandTrigger	次级菜单的展开方式，可选值 "hover" 与 ”click“	String	hover
multiple	是否多选	Boolean	false
checkStrictly	是否严格的遵守父子节点不互相关联	Boolean	true
emitPath	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值	Boolean	false
lazy	是否动态加载子节点，需与 lazyLoad 方法结合使用	Boolean	false
disabled	指定选项的禁用为选项对象的某个属性值	String	disabled

新增方法

方法名	作用	说明
getCascader	返回el-cascader组件实例	使用此方法后可调用el-cascader组件的方法
getDataList	返回树形数据的数组	使用此方法可返回所有树形数据列表
getDataMap	返回数据map对象	value: data

兼容ie样式问题

.el-cascader__tags .el-tag>span {
  flex: auto;
}
.el-cascader-menu__wrap{
  height: 300px;
}
.el-cascader-node__label{
  flex: none;
}
.el-cascader-node__postfix, .el-cascader-node__prefix {
  top: 50%;
  transform: translateY(-50%);
  line-height: 4px;
}

基于el-tree的el-tree-new组件使用说明书

使用

组件引入部分略

页面上使用（需要设置node-key属性）

<template>
	<el-tree-new ref="tree" show-checkbox node-key="menuId" :settings="defaultProps"  default-expand-all class="tree-warp" :data="menuList"></el-tree-new>
</template>

<script>
export default {
    data() {
		return {
            menuList: [],
            defaultProps: {
                children: "children",
                label: "title"
            },
        }
	}
}
</script>

接受el-tree所有参数及事件

调用el-tree的方法

调用el-tree的方法使用规则如下

this.$refs.tree.getTree().setCheckedKeys([])

先使用 getTree() 方法获取 el-tree的实例，然后再调用el-tree拥有的方法

新增方法

方法名	使用方式	作用说明
expandAll	this.$refs.tree.expandAll()	展开所有选项
foldAll	this.$refs.tree.foldAll()	折叠所有选项
expandAllFirstLevel	this.$refs.tree.expandAllFirstLevel()	展开所有一级树
foldAllFirstLevel	this.$refs.tree.foldAllFirstLevel()	折叠所有一级树
judgeExpandAll	this.$refs.tree.judgeExpandAll()	判断是否展开全部是的话返回 true，否则返回false
judgeFoldAll	this.$refs.tree.judgeFoldAll()	判断是否折叠全部是的话返回 true，否则返回false
judgeExpandAllFirstLevel	this.$refs.tree.judgeExpandAllFirstLevel()	判断是否展开全部一级树是的话返回 true，否则返回false
judgeFoldAllFirstLevel	this.$refs.tree.judgeFoldAllFirstLevel()	判断是否折叠全部一级树是的话返回 true，否则返回false
selectAll	this.$refs.tree.selectAll()	复选框模式下全选
unSelectAll	this.$refs.tree.unSelectAll()	复选框模式下全不选
toggleSelectAll	this.$refs.tree.toggleSelectAll()	复选框模式下反选
judgeSelectAll	this.$refs.tree.judgeSelectAll()	判断是否全选是的话返回 true，否则返回false
judgeUnSelectAll	this.$refs.tree.judgeUnSelectAll()	判断是否全不选是的话返回 true，否则返回false

注意： judgeExpandAll，judgeFoldAll，judgeExpandAllFirstLevel，judgeFoldAllFirstLevel，judgeSelectAll，judgeUnSelectAll

这四个方法一般配合 expandChange 事件使用，需再添加定时器，否则有bug，如

<el-tree-new ref="tree" show-checkbox node-key="id" @expandChange="expandChange" @check-change="checkChange" />
	expandChange(){
      setTimeout(() => {
        if (this.isExpand) {
          const isFoldAllFirstLevel = this.$refs.tree.judgeFoldAllFirstLevel() //是否折叠所有一级树
          if (isFoldAllFirstLevel) {
            this.isExpand = false
          }
        } else {
          const isExpandAllFirstLevel = this.$refs.tree.judgeExpandAllFirstLevel() //是否展开所有一级树
          if (isExpandAllFirstLevel) {
            this.isExpand = true
          }
        }
      }, 100)
    },

新增属性

参数	说明	类型	默认值
data	树的数据	Array	树数据的示例，太长在这不写
settings	设置	Object	{level: "level",children: "children",label: "label"}
maxLevel	限制最大层级 “1” 表示最大层级为2层 “2” 表示最大层级为 3层 ... 默认值为""，不限制层级	String	""

新增事件

事件名称	事件说明	备注
expandChange	折叠或展开时触发，无返回值	折叠状态改变可能比上面的判断方法执行的慢，导致判断不准确，因此需要再上述判断方法添加延时

解决bug

解决了点击非复选框时无法选中的问题

更新日志

3.1.3

【修复】修复el-checkbox-button-dict组件配置size和border无效问题
【修复】修复el-radio-button-dict组件配置size和border无效问题
【修改】将dayForamt过滤器及方法改名为 formatDate
【优化】去除dayjs依赖

3.1.2

【修复】去除无用依赖

3.1.1

【修复】修复cascader-new组件中配置disabled时，选项还可选的bug

3.1.0

【优化】listToTree 方法优化，修复原先去除某父元素后报错问题

3.0.4

【优化】checkbox,radio字典组件新增border，size，name 等配置

3.0.3

【优化】formatterDictList新增可配置参数，兼容当接口仅支持单个查询且返回数据无对应字典类型时可配置使用

3.0.1

【优化】补充tab-dict的角标配置项 max及hidden

3.0.0

【新增】 el-tabs-dict组件新增配置右上角角标功能
【新增】新增el-button-dict组件
【新增】新增el-link-dict组件

2.0.2

【新增】新增cacheApi接口缓存方法

2.0.1

【优化】 listToTree方法新增配置想要的字段数组

2.0.0

【兼容】日期脱敏兼容字符串格式时间戳
【新增】脱敏方法（手机号，地址，姓名，身份证号等）新增设置类型为 doNothing 后为不脱敏
【优化】请求方法兼容 delete，put，patch方式

1.0.9

【兼容】可配置低版本element依赖包，防止升级问题

1.0.8

【修复】修复树形方法错误问题
【优化】修复树形组件默认禁用字段错误问题

1.0.7

【修复】修复浏览器无缓存时，字典包报错问题
【优化】优化当无配置字典类型时，不请求字典数据

1.0.6

【优化】解决浏览器缓存有本地字典数据时，更新本地字典数据，无法替换浏览器缓存的bug
【优化】解决getTreeLabelByCode方法报错问题

1.0.5

【功能】新增debounce防抖方法
【功能】新增throttle节流方法
【优化】当请求字典类型数据为null，或者空数组时，抛出异常

1.0.4

【功能】新增el-tree-new组件
【功能】新增el-tree-dict组件
【功能】el-table-colmun组件新增配置树形字典数据
【功能】新增getTreeLabelByCode过滤器
【功能】新增getTreeLabelByCodes过滤器
【功能】新增getTreeCodeByLabel过滤器
【功能】新增getTreeIdByLabels过滤器
【功能】新增getTreeLabelByCode方法
【功能】新增getTreeLabelByCodes方法
【功能】新增getTreeCodeByLabel方法
【功能】新增getTreeIdByLabels方法
【功能】新增request方法，接收这个方法并做好相关配置可以防止接口重复请求

1.0.3

【功能】新增el-cascader-new组件
【功能】新增el-cascader-dict组件
【功能】新增数组转树形数据方法
【配置】新增配置，配置数组转树形数据配置
【优化】配置usuallyGetFileds 的时候过滤掉缓存已经有的字典数据值只请求没有的当缓存中都有时不请求

1.0.2

【修复】兼容ie浏览器

1.0.1

【修复】修复字典方法按需引入时不可用的bug
【修复】修复getLabelByCodes和getCodeByLabels两个过滤器，当部分值找不到字典值时展示默认值

1.0.0

【升级】el-table-colmun-dict组件新增spacer配置

0.0.9

【功能】el-tabs-dict新增禁用配置

0.0.8

【功能】新增el-tag-dict组件
【功能】新增$message方法

0.0.7

【功能】各个组件新增禁用项配置

0.0.6

【优化】优化各个组件赋值问题

0.0.5

【优化】如果查不到该类型字典数据，控制台报错
【优化】解决字典相关this.$过滤器方法，异步时存在的问题
【优化】解决字典数据更新时，字典数据未更新问题

0.0.4

【功能】将过滤器的方法暴露出来，可以使用this.$过滤器名调用过滤器方法

0.0.3

【功能】新增el-radio-button-dict组件
【功能】新增el-checkbox-button-dict组件
【功能】新增el-tabs-dict组件
【功能】新增getCodeByLabel过滤器
【功能】新增getCodeByLablels过滤器
【优化】日期格式化过滤器新增默认值配置
【优化】脱敏过滤器新增默认值配置
【优化】el-table-column-dict组件新增配置默认值，脱敏三个配置参数，字典过滤器的格式化参数
【优化】解决接口获取不到该字典数据类型时疯狂重复请求的问题，限制到只能获取一次

0.0.2

【功能】新增el-radio-dict组件
【功能】新增el-checkbox-dict组件
【功能】新增el-table-column-dict组件
【功能】新增 getLabelByCodes 过滤器
【优化】优化会重复请求相同字典的问题
【优化】字典过滤器新增添加默认值

0.0.1

【功能】el-select-dict组件
【功能】getLabelByCode过滤器

vue-element-dict

vue-element-dict文档说明

前言

优点

缺点

项目依赖

已有组件

已有过滤器

已有方法

安装

引入

dictSetting配置项说明

接口返回数据示例值

接口要求

el-select-dict使用API

dictType对象类型时配置参数

disableObj对象类型时配置参数（0.0.7及以上版本）

el-select-dict组件使用示例

el-tabs-dict使用API

dictType对象类型时配置参数

el-tabs-dict组件使用示例

el-tag-dict使用API

el-table-colmun-dict组件API

各个过滤器使用说明

组件赋值须知

cascader使用方法**

属性配置

settings属性配置表

新增方法

兼容ie样式问题

基于el-tree的el-tree-new组件使用说明书

调用el-tree的方法

新增方法

新增属性

新增事件

解决bug

更新日志

3.1.3

3.1.2

3.1.1

3.1.0

3.0.4

3.0.3

3.0.1

3.0.0

2.0.2

2.0.1

2.0.0

1.0.9

1.0.8

1.0.7

1.0.6

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0

0.0.9

0.0.8

0.0.7

0.0.6

0.0.5

0.0.4

0.0.3

0.0.2

0.0.1

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads