3. vue字典管理页面 api接口dictapi.js import request from '@/utils/request' //查询分页 export function getPage(page) { return request({ url: '/dict/page', method: 'post', data: page }) } //根据ID查找 export function find(id) { return request({ url: '/dict/'+id, method: 'get', }) } //批量删除 export function deleteModles(ids) { return request({ url: '/dict/delete?dictids='+ ids, method: 'delete', }) } //保存或更新 export function save(data) { return request({ url: '/dict/save', method: 'post', data: data }) } export function saveAll(data) { return request({ url: '/dict/saveBatch', method: 'post', data: data, notForm: true }) } export function dictDetail(data) { return request({ url: '/dict/dictDetail', method: 'post', data: data, }) } export function getDictCode(code) { return request({ url: '/dict/getDictCode', method: 'post', data: {codes:code}, }) } vue页面dictManage.vue 4. 页面效果 这样一个字典的增删改查就完成了 5. vue前端中的处理 5.1 完善获取字典的工具类 geDict.js最终版如下： import dictList from '@/utils/dict' /**获取静态字典值 **/ export function getDict(data, element, dictName) { const col = element.property const dictArr = dictList[dictName] if (!dictArr) return for (let item of dictArr) { if (item.id === data[col]) { return item.name } } } /**获取静态字典列表 **/ export function getDictList (dictName) { return dictList[dictName] } /**获取静态字典值 **/ export function getDictDb(val,dictArr){ if(val>=0 && dictArr && dictArr.length>0){ let temp = dictArr.filter(item => item.skey == val) if(temp.length==1){ return temp[0].svalue } } } 5.2 vue挂载方法 找到main.js添加如下代码 import {getDict,getDictList,getDictDb} from '@/utils/getDict' Vue.prototype.$getDict=getDict Vue.prototype.$getDictList=getDictList Vue.prototype.$getDictDb=getDictDb 5.3 页面使用 首先引入api，然后在method中调用后端api接口获取字典列表。