elementui dropdown实现二级菜单
{{ special.text ? special.text : getToolBarText(key) }}
{{ drop.name }}
{{ drop.name }}
{{ child.name }}
数据结构
special: {
text: "专题地图",
iconClass: "icon-ditu gisicon",
className:"special-map",
dropdownMenu: [
{
name: "征地分析",
command: "landAnalysis",
iconClass: "gisicon icon-tudi",
children: [
{
name: "项目进度分析",
command: "projectProgressAnaly",
},{
name: "项目分布分析",
command: "projectDistributionAnaly",
},{
name: "项目地类分析",
command: "projectLandAnaly",
},
],
},
{
name: "拆除分析",
command: "dismantleAnaly",
iconClass: "gisicon icon-tudi",
},
],
},
method 这是我用来显示不同的图标和名称，自行去掉
getToolbarIconClass({command,iconClass}) {
if(iconClass){
iconClass=iconClass.replace(" "," ");
return iconClass
}
const actionsList = new Map([
["xy", "el-icon-location-outline"],
["bookmark", "el-icon-discount"],
["bounds", "el-icon-full-screen"],
["marker", "gisicon icon-biaoji"],
["secondMap", "icon-duibi gisicon"],
["exportPDF", "el-icon-picture-outline"],
["clearAll", "el-icon-delete"],
["legend", "icon-tuli gisicon"],
["default", "el-icon-more"],
]);
return actionsList.get(command) || actionsList.get("default");
},
getToolBarText(key, from) {
const actionsList = new Map([
["measure", ["测量", "gisicon icon-changduceliang"]],
["draw", ["绘图工具", "gisicon icon-fuhao-huizhi"]],
["layers", ["图层", "gisicon icon-tuceng-"]],
["buffer", ["缓冲查询", "gisicon icon-xuxian"]],
["othertool", ["工具", "gisicon icon-weibiaoti--"]],
["edit", ["编辑地图", "gisicon icon-fuhao-huizhi"]],
["default", ["其他工具", "el-icon-more"]],
]);
let action = actionsList.get(key) || actionsList.get("default");
return from == "icon" ? action[1] : action[0];
},