Ruoyi字典源码学习( 二 ) _生活百科

loadDict(dict,dictMeta)

function loadDict(dict, dictMeta) {return dictMeta.request(dictMeta)//请求后端api ， 获取字典数据.then(response => {const type = dictMeta.typelet dicts = dictMeta.responseConverter(response, dictMeta)//将response转换成DictDataif (!(dicts instanceof Array)) {console.error('the return of responseConverter must be Array.<DictData>')dicts = []} else if (dicts.filter(d => d instanceof DictData).length !==dicts.length) {console.error('the type of elements in dicts must be DictData')dicts = []}//将response的数据插入到dict.type['dictName']的数组中//splice实现了响应式改变数组元素 ， 所以这里不用vue.setdict.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...dicts)//将dicts(也就是dictData)赋值给dict.type[type]dicts.forEach(d => {Vue.set(dict.label[type], d.value, d.label)//dict.label{'dictName':{}}添加属性d.value:d.label})return dicts})}

具体页面应用例如job/index.vue,

<el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable><el-optionv-for="dict in dict.type.sys_job_status":key="dict.value":label="dict.label":value="https://www.huyubaike.com/biancheng/dict.value"/></el-select>	export default{dicts:['sys_job_group','sys_job_status'],//dict:{'sys_job_group':[data1,data2],'sys_job_status':[data1,data2]} 通过上文的代码全局混入得到}