Vue_09_Spa_项目3次-开发动态树+数据表格+分页

最新推荐文章于 2023-06-21 11:17:47 发布

阿立不油腻

最新推荐文章于 2023-06-21 11:17:47 发布

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_58530605/article/details/121286100

版权

这篇博客介绍了如何在Vue.js项目中开发动态树形菜单，利用数据库数据构建菜单，并解决了点击一级菜单展开所有二级菜单的问题。接着，实现了文章在右侧的显示，创建了视图层级结构并配置路由。此外，还添加了分页功能，使用了饿了么UI库的分页组件，并提供了查询功能。

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

一、动态树功能

1.把树形菜单变成动态数据，拿到数据库中的数据

先在main.js里面关闭昨天的mock

// process.env.MOCK && require('@/mock')

再在LeftNav.vue里面写入：

<script>
	export default {
		data(){
      return{
        collapsed:false
      }
    },
    created(){/* 钩子函数 :只要组件被访问了，就执行这里面*/
    let url = this.axios.urls.SYSTEM_MENU_TREE;
    this.axios.post(url, this.ruleForm).then((resp) =>{
      console.log(resp);
    }).catch(function(error) {
      console.log(error);
    });
      this.$root.Bus.$on("collapsed-aside",(v)=>{
        this.collapsed = v;
      });
    }
	}
</script>

在LeftNav.vue留一个树形菜单，在<template>多余的删了：

<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-4">
    	<template slot="title">选项4</template>
    	<el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
	</el-menu>
</template>

LeftNav.vue添加图标样式：

<template slot="title">
        <i class="el-icon-location"></i>
            <span>一级菜单</span>
      </template>

<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-4">
    	<template slot="title">
        <i class="el-icon-location"></i>
            <span>一级菜单</span>
      </template>
      <el-menu-item index="1-4-1">
      	<template slot="title">
          <i class="el-icon-location"></i>
              <span>二级菜单</span>
        </template>

    </el-menu-item>
    </el-submenu>
	</el-menu>
</template>

LeftNav.vue：

通过v-for="m in menus调用方法：

<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">
			<im