SPA项目开发之动态树+数据

最新推荐文章于 2024-01-09 09:34:09 发布

小依不秃头

最新推荐文章于 2024-01-09 09:34:09 发布

阅读量620

点赞数 1

分类专栏： vue+element-UI 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_54936371/article/details/121270148

版权

vue+element-UI 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了如何在前端实现动态树功能，以便于左侧菜单的导航结构，并结合右侧文章的分页查询功能，展示了组件化开发和数据管理。通过实例展示了`el-menu`组件的使用和 Axios 与后端接口的交互，以及`el-pagination`和搜索组件的配置。

摘要由CSDN通过智能技术生成

目标：

动态树功能
右侧文章的分页查询功能

一、动态树功能

注释mock，与后台交互数据

在左侧树组件中进行数据读取

<template>
   <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
   active-text-color="#ffd04b" :collapse="collapsed">

       
       <div class="logobox">
           <img class="logoimg" src="../assets/img/logo.png" alt="">
       </div>
       <el-submenu index="1">
           <template slot="title">
               <i class="el-icon-location"></i>
               <span>导航一</span>
           </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">选项1</el-menu-item>
           </el-submenu>
       </el-submenu>
       <el-menu-item index="2">
           <i class="el-icon-menu"></i>
           <span slot="title">导航二</span>
       </el-menu-item>
       <el-menu-item index="3" disabled>
           <i class="el-icon-document"></i>
           <span slot="title">导航三</span>
       </el-menu-item>
       <el-menu-item index="4">
           <i class="el-icon-setting"></i>
           <span slot="title">导航四</span>
       </el-menu-item>
   </el-menu>
</template>
<script>
   export default {
       data() {
           return {
               collapsed: false
           }
       },
       //钩子函数，主线被访问了就会执行
       //v表示传过来的参数，折叠的变量
       created() {
           let url = this.axios.urls.SYSTEM_MENU_TREE;
           this.axios.post(url, {}).then((resp) => {
               console.log(resp);

           }).catch(function(error) {
               console.log(error);
           });
           this.$root.Bus.$on("collapsed-aside", (v) => {
               this.collapsed = v;
           });
       }
   }
</script>
<style>
   .el-menu-vertical-demo:not(.el-menu--collapse) {
       width: 240px;
       min-height: 400px;
   }

   .el-menu-vertical-demo:not(.el-menu--collapse) {
       border: none;
       text-align: left;
   }

   .el-menu-item-group__title {
       padding: 0px;
   }

   .el-menu-bg {
       background-color: #1f2d3d !important;
   }

   .el-menu {
       border: none;
   }

   .logobox {
       height: 40px;
       line-height: 40px;
       color: #9d9d9d;
       font-size: 20px;
       text-align: center;
       padding: 20px 0px;
   }

   .logoimg {
       height: 40px;
   }
</style>

定义一个集合来存放一级菜单

v-for遍历，循环遍历一级菜单，然后在循环遍历一级菜单中的子菜单

<template>
   <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
   active-text-color="#ffd04b" :collapse="collapsed">

       
       <div class="logobox">
           <img class="logoimg" src="../assets/img/logo.png" alt="">
       </div>
       <el-submenu ：index="'id_'+m.treeNodeId" v-for="m in menus">
           <template slot="title">
                   <i :class="m.icon"></i>
                                <span>{{m.treeNodeName}}</span>
           </template>
           <el-menu-item ：index="'id_'+m2.treeNodeId" v-for="m2 in m.children">
               <i :class="m2.icon"></i>
                                <span>{{m2.treeNodeName}}</span>
           </el-menu-item>
       </el-submenu>
   </el-menu>
</template>
<script>
   export default {
       data() {
           return {
               collapsed: false,
               //这里存放所有的一级菜单
               menus:[]
           }
       },
       //钩子函数，主线被访问了就会执行
       //v表示传过来的参数，折叠的变量
       created() {
           let url = this.axios.urls.SYSTEM_MENU_TREE;
           this.axios.post(url, {}).then((resp) => {
               console.log(resp);
               this.menus = resp.data.result;
           }).catch(function(error) {
               console.log(error);
           });
           this.$root.Bus.$on("collapsed-aside", (v) => {
               this.collapsed = v;
           });
       }
   }
</script>
<style>
   .el-menu-vertical-demo:not(.el-menu--collapse) {
       width: 240px;
       min-height: 400px;
   }

   .el-menu-vertical-demo:not(.el-menu--collapse) {
       border: none;
       text-align: left;
   }

   .el-menu-item-group__title {
       padding: 0px;
   }

   .el-menu-bg {
       background-color: #1f2d3d !important;
   }

   .el-menu {
       border: none;
   }

   .logobox {
       height: 40px;
       line-height: 40px;
       color: #9d9d9d;
       font-size: 20px;
       text-align: center;
       padding: 20px 0px;
   }

   .logoimg {
       height: 40px;
   }
</style>

二、右侧文章的分页查询功能

1.新建一个组件Articles.vue

2.定义锚点

3. 配置组件

import Articles from '@/views/sys/Articles'

定义路由

4.数据展示

Articles.vue

<template>

               
           </el-form-item>
       </el-form>
       
       <el-table size="small" :data="listData" element-loading-text="拼命加载中" style="width: 100%;">
           <el-table-column align="center" type="selection" min-width="1">
           </el-table-column>
           <el-table-column sortable prop="id" label="文章ID" min-width="1">
           </el-table-column>
           <el-table-column sortable prop="title" label="文章标题" min-width="3">
           </el-table-column>
           <el-table-column sortable prop="body" label="文章内容" min-width="5">
           </el-table-column>
       </el-table>

   </div>
</template>

//定义组件
<script>
   export default {
       name: 'Article',
       data() {
           return {
               listData: []
           }
       },
       created(){
           let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
               this.axios.post(url, {}).then((resp) => {
                   console.log(resp);
                   this.listData=resp.data.result;
               }).catch(function(error) {
                   console.log(error);
               });
               this.$root.Bus.$on("collapsed-aside", (v) => {
                   this.collapsed = v;
               });
       }
   }
</script>

<style>
</style>

5.分页组件和搜索组件

Article.vue

<template>
   <div>
       <el-form :inline="true" :model="formInline" class="user-search">
           <el-form-item label="搜索：">
               <el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
               <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
           </el-form-item>
       </el-form>
       
       <el-table size="small" :data="listData" element-loading-text="拼命加载中" style="width: 100%;">
           <el-table-column align="center" type="selection" min-width="1">
           </el-table-column>
           <el-table-column sortable prop="id" label="文章ID" min-width="1">
           </el-table-column>
           <el-table-column sortable prop="title" label="文章标题" min-width="3">
           </el-table-column>
           <el-table-column sortable prop="body" label="文章内容" min-width="5">
           </el-table-column>
       </el-table>
       <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
       :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
       :total="formInline.total">
       </el-pagination>
   </div>
</template>

//定义组件
<script>
   export default {
       name: 'Article',
       data() {
           return {
               listData: [],
               formInline: {
                   page: 1,
                   rows: 10,
                   total: 0,
                   title:''
               }
           }
       },
       methods: {
           handleSizeChange(rows) {

               this.formInline.page = 1;
               this.formInline.rows = rows;
               this.search();
           },
           handleCurrentChange(page) {

               this.formInline.page = page;
               this.search();
           },
           dosearch(param) { //查询
               let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
               this.axios.post(url, param).then((resp) => {
                   console.log(resp);
                   this.listData = resp.data.result;
                   this.formInline.total = resp.data.pageBean.total;
               }).catch(function(error) {
                   console.log(error);
               });
               this.$root.Bus.$on("collapsed-aside", (v) => {
                   this.collapsed = v;
               });
           },
           search(){
               this.dosearch(this.formInline);
           }
       },
       created() {
           this.dosearch({});
       }
   }
</script>

<style>
</style>