DXSQP 2022-05-02 21:33 采纳率: 94.7%
浏览 1575
已结题

element ui中的navmenu如何居中显示并且在前面添加logo图标

整个导航代码

<template>

  <div class="index">
    <el-header>
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        router
        @select="handleSelect"
      >
        <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { name: "/", navItem: "首页" },
        { name: "/test1", navItem: "元宇宙" },
        { name: "/test2", navItem: "操作系统" },
        { name: "/test3", navItem: "产品中心" },
        { name: "/test4", navItem: "解决方案" },
        { name: "/test5", navItem: "新闻中心" },
        { name: "/test6", navItem: "关于我们" },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style  scoped>
.index {
  width: 100%;
  height: 100%;
}
.el-card__body, .el-main{
    padding: 0px;
}
.el-menu.el-menu--horizontal{
    border-bottom:none !important;
}
.el-menu-item.is-active{
    border-bottom:2px solid #e69524;
    color: #e69524;
}
</style>


img


在首页前面添加图片

  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-05-02 21:54
    关注

    template添加icon

    
    <template slot="title">
        <i class="el-icon-menu"></i>
        <span> {{ item.navItem }}</span>
    </template>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月11日
  • 已采纳回答 8月3日
  • 创建了问题 5月2日