import{MenuasMenuIcon}from'@element-plus/icons-vue' 1. 最后,我只直接换了一个其他icon组件,然后我提交了issues,建议他们重新改下命名方式。链接:[Bug Report] el-menu菜单组件引入动态渲染icon图标时,图标组件刚好是Menu时报错,菜单不显示 · Issue #5570 · element-plus/element-plus · GitHub...
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plusel-menu组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。
<el-icon><Menu /></el-icon> <span>{{ menu.chineseName }}</span> </template> <!-- 多级嵌套菜单渲染 --> <sub-menu :menu="menuItem" v-for="menuItem in menu.childMenu" :key="menuItem.name"></sub-menu> </el-sub-menu> <el-menu-item :index="menu.name" v-else> <el-icon...
// main.ts// 如果您正在使用CDN引入,请删除下面一行。import*asElementPlusIconsVuefrom'@element-plus/icons-vue'constapp=createApp(App)for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app.component(key,component)} 第四步 使用component组件 绑定is动态绑定图标 直接使用 <el-menu-itemindex...
4. 在组件中使用Element Plus的Menu组件,并通过v-for指令动态渲染菜单项 在上面的代码片段中,我们已经使用了el-menu和el-menu-item组件,并通过v-for指令动态渲染了菜单项。menuData是一个包含菜单项信息的数组,每个菜单项都有一个index和title属性。 5. 实现菜单项的点击事件处理函数,以响应用户的操作 在setup函...
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plusel-menu组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 1 数据结构定义 1.1 菜单项数据结构 使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; ...
所以把问题定位到dom加载及渲染顺序上 个人想法:既然数据都是正确的,很有可能就是因为dom还未更新完成,就重新设置了default-active属性,导致匹配不到相应的导航 解决方法来了 给二级目录设置v-if <el-menu v-if="showDom" router :default-active="$route.path"></el-menu> ...
因为权限的问题,角色不同显示的菜单也不一样,所以需要动态生成。 图标组件 安装 npm install @element-plus/icons-vue@2.3.1 编辑src/main.ts,注册所有图标。 import'./style.css' import*asElementPlusIconsVuefrom'@element-plus/icons-vue' constapp = createApp(App) ...
element-plus日历组件在动态渲染时有哪些需要注意的地方? 如何避免在使用element-plus日历组件时出现性能问题? 效果图 实战代码 代码语言:javascript 复制 <template> <el-calendar> <template #date-cell="{ data }"> <el-row :class="data.isSelected ? 'is-selected' : 'sds'"> {{ data.day.split('-...
试着给el-menu加了key,没有重新渲染。 想了想,有没有可能是菜单引用地址变了,所以不会重新渲染(没有看element-plus的源代码,不知道怎么实现的)? 于是,点击2进行切换的时候直接修改的子项url,没有调用getMenus这个方法。试下: menus[0].url = '/a/' + b + '/xxxx' ...