SPA项目开发之动态实现左侧菜单栏&分页查询功能

_Leaf1217

已于 2022-09-16 12:46:54 修改

阅读量452

点赞数

分类专栏： Vue 文章标签： vue.js SPA javascript

于 2022-09-14 20:37:15 首次发布

本文链接：https://blog.csdn.net/qq_63492318/article/details/126859762

版权

本文介绍了在SPA项目中使用Vue.js动态生成左侧菜单栏的步骤，包括获取数据、渲染节点等关键操作，并详细讲解了如何实现书籍列表的分页查询功能，涉及el-table、el-pagination组件及axios的使用。

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

一、动态左侧菜单

1.1 实现动态左侧菜单的步骤

① 确定静态树形菜单节点的样式排版；

② 获取属性节点的数据；

this.axios.post

③ 通过拿到的数据，渲染树形节点。

v-for 渲染节点

定义渲染节点的变量

Leaf这里就直接放上写好的LeftNav.vue组件：

LeftNav.vue

<template>
	<el-menu default-active="2" router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
    <el-submenu v-for="m in menus" :key="'id_'+m.treeNodeId" :index="'id_'+m.treeNodeId" >
        <template slot="title">
           <i :class="m.icon"></i>
           <span>{
  {m.treeNodeName}}</span>
        </template>
        <el-menu-item v-for="m2 in m.children" :key="'id_'+m2.treeNodeId" :index="m2.url">
          <i :class="m2.icon"></i>
          <span>{
  {m2.treeNodeName}}</span>
        </el-menu-item>
    </el-submenu>
	</el-menu>
</template>
<script&