SPA项目开发之左侧树+表格+分页

最新推荐文章于 2022-09-13 11:27:36 发布

only老K

最新推荐文章于 2022-09-13 11:27:36 发布

阅读量184

点赞数

分类专栏：前端文章标签： SPA 左侧树数据表格分页

本文链接：https://blog.csdn.net/weixin_44255950/article/details/101623366

版权

本文介绍了一个SPA项目的开发过程，包括动态树功能的实现，关闭mock.js，定义变量，加载数据，以及在LeftNav.vue组件中处理数据。接着，详细讲述了数据表格的构建，从简单的页面跳转到配置Articles.vue和index.js，实现左侧菜单与页面内容的联动。最后，实现了分页和搜索功能，以提升用户体验。

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

动态树功能

关闭mock.js

main.js中关闭
在这里插入图片描述

定义变量

return {
				collapsed: false,
				menus:[]
			}

获取数据

created() {
      //v就是从vue总线Bus获取的变量值
      this.$root.Bus.$on('collapsed-side-click',(v)=>{
        this.collapsed=v;
      });
      //从后端去拿取左侧树的数据
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      this.axios.post(url, this.ruleForm).then((response) => {
        console.log(response);
        this.menus=response.data.result;
      }).catch(function(error) {
        console.log(error);
      });
    }

加载数据

<el-submenu index="1" v-for="m in menus">
			<template slot="title">
				<i :class="m.icon"></i>
				<span>{
  {m.treeNodeName}}</span>
			</template>
			<el-menu-item index="1-2" v-for="m2 in m.children">
				<template slot="title">
					<i :class="m2.icon"></i>
					<span>{
  {m2.treeNodeName}}</span>
				</template>
			</el-menu-item>
		</el-submenu>

LeftNav.vue

<template>
	<el-menu default-active="2" 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 index="1" v-for="m in menus">
			<template slot="title">
				<i :class="m.icon"></i>
				<span>{
  {m.treeNodeName}}</span>
			</template>
			<el-menu-item index="1-2" v-for="m2 in m.children">
				<template slot="title">
					<i :class="m2.icon"></i>
					<span>{
  {m.treeNodeName}}</span>
				</template>
			</el-menu-item>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
		data() {
			return {
				collapsed: false,
				menus:[]
			}
		},
		created() {
			//v就是从Vue总线Bus中获取的变量值
			this.$root.Bus.$on('collapsed-side-click', (v) => {
				this.collapsed = v;
			});

			let url = this.axios.urls.SYSTEM_MENU_TREE;
			this.axios.post(url, this.ruleForm).then((response) => {