el-menu解决外层div导致collapse失效问题

2022-11-11 本文已影响0人习惯水文的前端苏

$\bullet$ 问题描述

接口请求回菜单列表后，使用v-for循环在el-menu-item外层套用div，collapse失效

$\bullet$ 问题修复

$\ast$ 利用vue的plugin能力注册全局fragment组件

$\ast$ setup阶段标记出需要处理的节点，默认生成div标签包裹

$\ast$ mounted后，开始对插槽传入的dom节点做处理，本质上就是将fragment组件包裹的子dom节点提取出来放置到原父节点下并删除fragment组件默认的根节点

$\bullet$ 使用

$\ast$ 使用

$\ast$ 页面渲染结果