vue element的若干问题

1.解决导航折叠,开启后,开启不全的问题

    在Home.vue里,v-show="!collapsed"改成v-if="!collapsed"。

2.解决mock数据和真实数据的切换问题

把main.js中下面两行注释掉

import Mockfrom './mock' 

Mock.bootstrap();

3.单击空白处,对话框消失(不用点击关闭按钮)

把下面代码修改:

旧:<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">

新:<el-dialog title="编辑" :visible.sync="addFormVisible">

close-on-click-modal="false" 就是点击空白关闭无效的意思

4.改变原有样式,弹出框在右边,上下撑满

<el-dialog title="編集" :visible.sync="editFormVisible" top="0px">

top="0px"为顶到字上层

<style lang="scss">

    .el-dialog{

position:fixed; //相对于浏览器窗口进行定位, 滚动条消失

height:100%;

width:600px;  //固定写死宽度,这样在浏览器大小变动的时候,弹出框宽度不变

left:calc(100% -600px);  //关键在此,计算。减去宽度的一半

    }

</style>

5.更新本地"element-ui"包的版本

# npm ls element-ui 查看本地element-ui的版本号

#手动修改修改package.json中包的版本号。1.2.8→2.4.7

#npm update element-ui 更新element-ui的版本号。

#如果有需要,在main.js中修改,element-ui的index.css的依赖路径

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要了解一下 Vue-element-admin 的菜单栏是如何实现的。Vue-element-admin 中的菜单栏是通过路由配置文件 `src/router/index.js` 中的 `asyncRoutes` 定义的,其中每一个路由对象代表一个菜单项。 要调整菜单栏,我们需要修改路由配置文件。下面是一个简单的示例,我们将 `asyncRoutes` 中的第一个菜单项改为 “用户管理”,并添加一个新的顶部模块菜单栏。 ```javascript import Layout from '@/layout' export const asyncRoutes = [ { path: '/user', component: Layout, redirect: '/user/list', alwaysShow: true, // 一直显示根路由 name: 'User', meta: { title: '用户管理', icon: 'user' }, children: [ { path: 'list', component: () => import('@/views/user/list'), name: 'UserList', meta: { title: '用户列表' } }, { path: 'add', component: () => import('@/views/user/add'), name: 'UserAdd', meta: { title: '添加用户' } } ] }, // 其他菜单项... ] export const constantRoutes = [ // 其他路由... ] const createRouter = () => new Router({ // ... }) const router = createRouter() export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // 重置路由器 } export default router ``` 上面的代码中,我们将第一个菜单项的 `title` 改为 “用户管理”,并添加了一个新的菜单项 `UserList` 和 `UserAdd`,并将它们添加到了 `User` 路由下面。我们还可以看到 `alwaysShow` 属性被设置为 `true`,这意味着菜单栏将一直显示根路由,即 `User` 路由。 现在我们需要在 `src/layout/components/Navbar.vue` 组件中添加一个新的顶部模块菜单栏。下面是一个简单的示例: ```html <template> <div class="navbar-container"> <div class="navbar-logo"> <!-- 左侧 Logo --> </div> <div class="navbar-menu"> <!-- 左侧菜单栏 --> </div> <div class="navbar-module"> <el-menu mode="horizontal"> <el-submenu index="module1"> <template slot="title">模块1</template> <el-menu-item index="module1-1">菜单项1</el-menu-item> <el-menu-item index="module1-2">菜单项2</el-menu-item> </el-submenu> <el-submenu index="module2"> <template slot="title">模块2</template> <el-menu-item index="module2-1">菜单项1</el-menu-item> <el-menu-item index="module2-2">菜单项2</el-menu-item> </el-submenu> </el-menu> </div> <div class="navbar-right"> <!-- 右侧菜单栏 --> </div> </div> </template> <script> export default { name: 'Navbar' } </script> <style scoped> /* 样式 */ </style> ``` 上面的代码中,我们在 `navbar-module` 中添加了一个 `el-menu` 组件,其中包含了两个 `el-submenu` 组件,分别代表两个模块。每个 `el-submenu` 组件中包含了若干个 `el-menu-item` 组件,代表不同的菜单项。 现在,我们已经完成了对 Vue-element-admin 中菜单栏的调整和顶部模块菜单栏的添加。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值