• SPA项目之主页面--动态树&右侧内容管理


    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    接下来看看由辉辉所写的关于Vue+ElementUI的相关操作吧

    目录

    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    一.左侧动态树

    1.定义组件

    ①样式&数据处理

    ②后台数据交互

    ③代码汇总

    2.定义组件的和路由的关系

    ​编辑3.效果演示

    二.右侧表格内容&分页

    1.定义组件

    ①样式&数据处理

    ②后台数据交互

    ③代码汇总

    2.定义组件的和路由的关系

    3.效果演示


    一.左侧动态树

    1.定义组件

    ①样式&数据处理

    1. default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
    2. active-text-color="#ffd04b" :collapse="collapsed">
    3. <div class="logobox">
    4. <img class="logoimg" src="../assets/img/logo.png" alt="">
    5. div>
    6. <el-submenu v-for="m in menus" :index="'id_'+m.id" :key="'key_'+m.id">
    7. <template slot="title">
    8. <i class="m.icon">i>
    9. <span>{{m.text}}span>
    10. template>
    11. <el-menu-item v-for="m2 in m.modules" :index="m2.url" :key="'key_'+m2.id">
    12. <i class="m2.icon">i>
    13. <span>{{m2.text}}span>
    14. el-menu-item>
    15. el-submenu>
    16. el-menu>

    ②后台数据交互

    ③代码汇总