共计 2995 个字符，预计需要花费 8 分钟才能阅读完成。
继续挖坑！！
使用到的组件 headerasiderrowcolinputel-tabs 和 v -for 联合使用
<template>
<div style=”margin-top: 0px;”>
<el-container style=”margin-top: 0px;border: 1px solid #eee”>
<el-header>
<HeaderNav/>
</el-header>
<el-container class=’CenterContent’>
<el-aside width=”200px” style=”background-color: rgb(238, 241, 246)”>
<el-menu :default-openeds=”[‘1’, ‘3’]”>
<el-submenu index=”1″>
<template slot=”title”><i class=”el-icon-message”></i> 导航一 </template>
<el-menu-item-group>
<template slot=”title”> 分组一 </template>
<el-menu-item index=”1-1″> 选项 1 </el-menu-item>
<el-menu-item index=”1-2″> 选项 2 </el-menu-item>
</el-menu-item-group>
<el-menu-item-group title=” 分组 2 ″>
<el-menu-item index=”1-3″> 选项 3 </el-menu-item>
</el-menu-item-group>
<el-submenu index=”1-4″>
<template slot=”title”> 选项 4 </template>
<el-menu-item index=”1-4-1″> 选项 4 -1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index=”2″>
<template slot=”title”><i class=”el-icon-menu”></i> 导航二 </template>
<el-menu-item-group>
<template slot=”title”> 分组一 </template>
<el-menu-item index=”2-1″> 选项 1 </el-menu-item>
<el-menu-item index=”2-2″> 选项 2 </el-menu-item>
</el-menu-item-group>
<el-menu-item-group title=” 分组 2 ″>
<el-menu-item index=”2-3″> 选项 3 </el-menu-item>
</el-menu-item-group>
<el-submenu index=”2-4″>
<template slot=”title”> 选项 4 </template>
<el-menu-item index=”2-4-1″> 选项 4 -1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index=”3″>
<template slot=”title”><i class=”el-icon-setting”></i> 导航三 </template>
<el-menu-item-group>
<template slot=”title”> 分组一 </template>
<el-menu-item index=”3-1″> 选项 1 </el-menu-item>
<el-menu-item index=”3-2″> 选项 2 </el-menu-item>
</el-menu-item-group>
<el-menu-item-group title=” 分组 2 ″>
<el-menu-item index=”3-3″> 选项 3 </el-menu-item>
</el-menu-item-group>
<el-submenu index=”3-4″>
<template slot=”title”> 选项 4 </template>
<el-menu-item index=”3-4-1″> 选项 4 -1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style=”text-align: right; font-size: 12px”>
<el-dropdown>
<i class=”el-icon-setting” style=”margin-right: 15px”></i>
<el-dropdown-menu slot=”dropdown”>
<el-dropdown-item> 查看 </el-dropdown-item>
<el-dropdown-item> 新增 </el-dropdown-item>
<el-dropdown-item> 删除 </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span> 王小虎 </span>
</el-header>
<el-main>
<el-tabs v-model=”activeName2″ type=”border-card” @tab-click=”handleClick”>
<el-tab-pane label=” 用户管理 ” name=”first”>
<el-table :data=”tableData”>
<el-table-column prop=”date” label=” 日期 ” width=”140″>
</el-table-column>
<el-table-column prop=”name” label=” 姓名 ” width=”120″>
</el-table-column>
<el-table-column prop=”address” label=” 地址 ”>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label=” 文本分类 ” name=”second”>
<el-table :data=”tableData”>
<el-table-column prop=”date” label=” 日期 ” width=”140″>
</el-table-column>
<el-table-column prop=”name” label=” 姓名 ” width=”120″>
</el-table-column>
<el-table-column prop=”address” label=” 地址 ”>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label=” 红楼梦随想 ” name=”third”>
<HLMGen/>
</el-tab-pane>
<el-tab-pane label=” 图片分类 ” name=”fourth”><TextGen/>></el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
<el-footer><FootNav/>></el-footer>
</el-container>
</div>
</template>
