如果发现只有菜单,没有图标,只需要在models下的menu.ts中天下如下内容
import allIcons from '@@/plugin-antd-icon/icons';
import React from 'react';
const toHump = (name: string) =>
name.replace(/-(\w)/g, (all: string, letter: any) => letter.toUpperCase());
const formatter = (data: any[]) => {
data.forEach(item => {
if (item.icon) {
const { icon } = item;
const v4IconName = toHump(icon.replace(icon[0], icon[0].toUpperCase()));
const NewIcon = allIcons[icon] || allIcons[''.concat(v4IconName, 'Outlined')];
if (NewIcon) {
try {
// eslint-disable-next-line no-param-reassign
item.icon = React.createElement(NewIcon);
} catch (error) {
console.log(error);
}
}
}
if (item.routes || item.children) {
const children = formatter(item.routes || item.children); // Reduce memory usage
item.children = children;
}
});
return data;
};
然后再函数返回前调用上面的函数,就可以了,是不是很简单
//这里做了个转换,可能服务端返回的接口格式和前端的路由格式并不一致,可以在这个方法里进行调整,这里的方法仅作参考,根据自己实际情况进行调整即可
const menuFormatter = (response: any) => {
if (response === null)
{
console.log("response === null");
return [];
}
else if(response === undefined)
{
console.log("response === undefined");
return [];
}
return formatter(response);
}