前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue2 element-ui构造菜单树

vue2 element-ui构造菜单树

作者头像
路过君
发布2022-04-13 13:40:51
4030
发布2022-04-13 13:40:51
举报
文章被收录于专栏:路过君BLOG from CSDN
代码语言:javascript
复制
<script>
function buildMenuTemplate(h, menus) {
  return menus.map((menu) => {
    let html = null;

    if (menu.children && menu.children.length > 0) {
      let childrenEl = buildMenuTemplate(h, menu.children)
      html = (
          <el-submenu index={String(menu.id)} key={menu.id}>
            <template slot="title">
              <i class={menu.iconCls}></i>
              <span slot="title">{menu.text}</span>
            </template>
            {childrenEl}
          </el-submenu>
      );
    } else {
      html = (
          <el-menu-item index={menu.id} key={menu.id}>
            <i class={menu.iconCls}></i>
            <span slot="title">{menu.text}</span>
          </el-menu-item>
      );
    }
    return html;
  });
}
export default {
  name: "TreeMenu",
  props: ["menus"],
  methods: {
    onMenuItemSelect(menuIndex) {
      this.$emit('select', menuIndex)
    }
  },
  render(createElement) {
    let el = buildMenuTemplate(createElement, this.menus)
    return (
        <el-menu on-select={this.onMenuItemSelect}>
          {el}
        </el-menu>
    );
  }
}
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022/01/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档