酸酸的果子
2021-06-21 14:11
采纳率: 100%
浏览 307

Element ui NavMenu 导航菜单 template中的内容不显示

 <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#313743"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>

 

如图,在element ui 组件中复制的内容 , 但是到了自己的项目中 写在tempalte中的 文字以及图标都不能正确展示 

VUE-CLI3初始化项目 ,使用npm 

main.js如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import less from 'less'
import 'element-plus/lib/theme-chalk/index.css';
import axios from './assets/js/axios';
// 导入全局样式表
import './assets/css/global.css';
// 导入字体图标
import './assets/fonts/iconfont.css'

const app = createApp(App);
app.use(router).use(ElementPlus).use(less);
app.mount('#app');

app.config.globalProperties.$http = axios;

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 酸酸的果子 2021-06-21 17:01
    已采纳

    已经弄好了,是VUE3.X对element ui 的支持不够好 , 已经退到 VUE2.X版本重新开发了

    点赞 评论
  • 十二黎 2021-06-21 15:00

    没装库的话装一下就行 npm i element-ui -S

    点赞 评论
  • wccode 2021-06-21 15:13

    没有图标说明没有引用css+js资源。如果你是npm引入的,可以直接复制官方的demo,如果你是html,需要引入CDN。可以查看官网上的在线运行。把哪几个文件都考下来

    如果对您有帮助,请你点赞 + 采纳,这是对我最大的鼓励

    点赞 评论
  • qq_35231506 2021-08-31 15:42

    再template中加v-slot:title

    点赞 2 评论
  • dai1090299163 2021-09-17 17:31

    再template中加slot="title",我的原因是因为使用了element ui 3.x版本的写法“#title",改成2.x的写法slot="title"就可以显示了

    点赞 评论

相关推荐 更多相似问题