el-dropdown-menu下拉菜单不显示
<el-header> <el-row> <el-col :span="12"> <span style="font-size: 18px;color:darkcyan">慕课网办公OA系统</span> </el-col> <el-col :span="12" style="text-align:right"> <el-dropdown> <i class="el-icon-s-check" style="font-size:18px;margin-right: 15px"> <span style="margin-right: 15px">张三[研发工程师]</span> </i> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>注销</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </el-col> </el-row> </el-header>
el-header代码用的课件中的代码，程序运行，鼠标停留在张三上，注销下拉菜单出不来，怎么回事？
25
收起
正在回答 回答被采纳积分+1
1回答
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>慕课OA办公系统</title> <!-- 引入CSS样式库，使用饿了吗的CSS样式表--> <link href="assets/element-plus/index.css" type="text/css" rel="stylesheet"> <!-- 引入vue的核心文件和element的核心文件--> <script src="assets/vue/vue.global.js"></script> <script src="assets/element-plus/index.full.js"></script> <!-- 引入axios和后台进行交互--> <script src="assets/axios/axios.js"></script> <style> .el-header { background-color: rgb(238, 241, 246); color: #333; line-height: 60px; } /*固定写法*/ html, body, #app, el-container { padding: 0px; margin: 0px; height: 100%; max-height: 100%; } </style> </head> <body> <div id="app"> <el-container style="height:100%;border:1px solid #eee"> <el-header> <!-- el-row标签把头部栏分为24份--> <el-row> <!-- 第一列宽度50%，12份--> <el-col :span="12"> <span style="font-size: 18px;color: darkcyan">慕课网办公OA系统</span> </el-col> <el-col :span="12" style="text-align:right"> <!--创建下拉菜单--> <el-dropdown> <i class="el-icon-s-check" style="font-size: 18px;margin-right: 15px"> <span style="margin-right: 15px">{{employee.name}}[{{employee.title}}]</span> </i> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>注销</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </el-col> </el-row> </el-header> <el-container> <el-aside width="200px" style="max-height: 100%;background-color:rgb(238,241,246) "> <!-- 菜单默认打开状态--> <el-menu :default-openeds="['0']"> <!-- template用于执行指定语句,把所有模块数据提取出来--> <template v-for="(n,idx) in nodeList"> <!-- :index是子菜单的索引，只接收字符串--> <el-submenu :index="idx.toString()"> <!-- 显示模块的名字，并加上icon图标--> <template #title><i class="el-icon-s-tools"></i>{{n.node.nodeName}}</template> <template v-for="func in n.childen"> <el-menu-item :index="func.nodeId.toString()" v-on:click="showPage(func.url)"> {{func.nodeName}} </el-menu-item> </template> </el-submenu> </template> </el-menu> </el-aside> <el-main> <iframe id="main" name="main" src="http://www.baidu.com" style="width: 100%;height: 99%;border: 0px"></iframe> </el-main> </el-container> </el-container> </div> <script> const main = { data() { return { nodeList: [] , employee: {} } } , methods: { showPage(url) { document.getElementById("main").src = url; } } //当前页面初始化完毕时，发起ajax请求 , mounted() { const objapp = this; const eid = sessionStorage.eid; const uid = sessionStorage.uid; axios.get("/api/user_info?uid=" + uid + "&eid=" + eid).then(function (response) { const json = response.data; //把当前页面获取到的用户可用模块信息压入当前页面的nodeList数组中,获取到数据就可以在aside栏绘制菜单了 json.data.nodeList.forEach(function (item) { objapp.nodeList.push(item); }); objapp.employee = json.data.employee; console.info(objapp.employee); console.log(objapp.nodeList); }) } } const app = Vue.createApp(main); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>这是我的代码
2022-06-12 18:44:37
2023版Java工程师
- 参与学习 人
- 提交作业 8788 份
- 解答问题 9886 个
综合就业常年第一，编程排行常年霸榜，北上广深月薪过万！ 不需要基础，无需脱产即可学习，只要你有梦想，想高薪！ 全新升级：技术栈升级（包含VUE3.0，ES6，Git）+项目升级（前后端联调与功能升级）
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星