<div style="display: flex"> <div style="width: 200px; min-height: calc(100vh - 60px); border-right: 1px solid #ccc"> <el-menu :default-active="activePath" :default-openeds="menus.map(v => v.id + '')" class="el-menu-demo" style="border: none" router > <div v-for="item in menus" :key="item.id"> <div v-if="item.type === 2"> <el-menu-item :index="item.path" v-if="!item.hide"> <el-icon v-if="item.icon"> <component :is="item.icon"></component> </el-icon> <span>{{ item.name }}</span> </el-menu-item> </div> <div v-else> <el-sub-menu :index="item.id + ''" v-if="!item.hide"> <template #title> <el-icon v-if="item.icon"> <component :is="item.icon"></component> </el-icon> <span>{{ item.name }}</span> </template> <div v-for="subItem in item.children" :key="subItem.id"> <el-menu-item :index="subItem.path" v-if="!subItem.hide"> <template #title> <el-icon v-if="subItem.icon"> <component :is="subItem.icon"></component> </el-icon> <span>{{ subItem.name }}</span> </template> </el-menu-item> </div> </el-sub-menu> </div> </div> </el-menu> </div> <div style="flex: 1; padding: 10px"> <router-view v-slot="{ Component }"> <component @getAvatar="getAvatarHandler" ref="childRef" :is="Component" /> </router-view> </div> </div> </div>

这是一个Vue.js的模板代码，它包含了一个使用了Flex布局的div元素，其中包含了两个子元素。第一个子元素是一个el-menu组件，它使用了Vue.js的数据绑定语法，根据menus数组的内容动态生成菜单项和子菜单项。第二个子元素是一个router-view组件，它用于渲染当前路由对应的组件。这个组件是使用了一个名为"childRef"的ref属性，用于在父组件中访问子组件的方法。另外，当子组件触发了"getAvatar"事件时，父组件的"getAvatarHandler"方法会被调用。这个模板代码中还包含了一些行内样式，用于设置元素的宽度、高度、边框、内边距等。