SPA项目开发之动态树+数据表格+分页

最新推荐文章于 2024-03-04 10:00:22 发布
最新推荐文章于 2024-03-04 10:00:22 发布
阅读量254 收藏
点赞数
分类专栏： html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65795902/article/details/126826715
版权

目录

一、动态树功能

1.1修改静态树形

先对左侧菜单栏进行修改：
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-4">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="1-4-1">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

运行结果：
在这里插入图片描述

1.2拿到树形菜单数据

然后拿到树新菜单数据;
在这里插入图片描述
r然后运用 let url = this.axios.urls.SYSTEM_MENU_TREE;定义路径；
this.axios.post发送请求
写在钩子函数created里面；

/  //拿到树形节点的数据
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      this.axios.post(url, {})
        .then(resp => { //代表成功 箭头函数 jdk8的语法
          console.log(resp);
        }).catch(function() { //代表失败

        });

拿到数据
在这里插入图片描述

1.3、通过拿到的数据，渲染树形节点

先定义变量然后赋值
在这里插入图片描述

 created() {
      // 从总线拿到this.collapsed变量
      this.$root.bus.$on('collapsed-side', v => {
        this.collapsed = v;
      });

      //拿到树形节点的数据
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      this.axios.post(url, {})
        .then(resp => { //代表成功 箭头函数 jdk8的语法
        this.menus=resp.data.result;
          console.log(resp);
        }).catch(function() { //代表失败

        });
    }

然后通过变量menus，拿到里面的数据，然后用v-for遍历给树形节点赋值

<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" :index="'id_'+m.treeNodeId" >
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{m.treeNodeName}}</span>
      </template>
      <el-menu-item v-for="m2 in m.children" :key="'id_'+m2.treeNodeId" :index="m2.url">
        <i class="el-icon-location"></i>
        <span>{{m2.treeNodeName}}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

运行结果：
在这里插入图片描述

1.4实现路由跳转

在el-menv里面写入 router :default-active=“$route.path”
在这里插入图片描述
第二步找到放页面的地方，定义锚点
在这里插入图片描述

然后定义路由
先写一个Articles.vue

<template>
  <div>文章管理</div>
</template>

<script>
export default {
  name: 'Articles',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Articles from '@/views/sys/Articles'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }, {
      path: '/Login',
      name: 'Login',
      component: Login
    },{
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },{
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        }
      ]
    }


  ]
})

运行结果：
在这里插入图片描述

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

2.1实现数据表格

先找一个表格模板进行改造

<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" 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-column align="center" label="操作" min-width="300">
 				<template slot-scope="scope">
 					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 					<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
 				</template>
 			</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="total">
    </el-pagination> -->
  </div>

然后定义我们需要的变量

data() {
      return {
        listData: []/* ,
        formInline: {
          page: 1,
          rows: 10,
          title: ''
        },
        total: 0 */
      };
    }

然后定义路径，获取数据

 created() {
      //拿到书籍表的数据
      let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
      this.axios.post(url, {})
        .then(resp => { //代表成功 箭头函数 jdk8的语法
          this.listData = resp.data.result;
          console.log(resp);
        }).catch(function() { //代表失败

        });
    }

运行结果：
在这里插入图片描述

2.2 分页查询

2.2.1半成品

 <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-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="total">
    </el-pagination>

定义分页所需要的变量

data() {
      return {
        listData: [],
        formInline: {
          page: 1,
          rows: 10,
          title: ''
        },
        total: 0
      };
    }

分页需要的方法：

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

运行结果：半成品
在这里插入图片描述

2.2.2成品

页面代码

<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" 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-column align="center" label="操作" min-width="300">
 				<template slot-scope="scope">
 					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 					<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
 				</template>
 			</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="total">
    </el-pagination>
  </div>

所需变量：

 data() {
      return {
        listData: [],
        formInline: {
          page: 1,
          rows: 10,
          title: ''
        },
        total: 0
      };
    }

方法：

 methods: {
      // 页数大小改变方法
      handleSizeChange(rows) {
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      // 页码发生改变方法
      handleCurrentChange(page) {
        this.formInline.page = page;
        this.search();
      },
      // 分页查询方法带参数
      doSearch(params) {
        let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
        // let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';

        this.axios.post(url, params).then((response) => {
          console.log(response);
          this.listData = response.data.result;
          this.total = response.data.pageBean.total;
        }).catch(function(error) {
          console.log(error);
        });
      },
      search() {
        this.doSearch(this.formInline);
      }
    },
    // 不带参数查询方法
    created() {
      this.doSearch({});
    }

运行结果：
在这里插入图片描述

java小易
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java动态树形菜单与分页
01-16
java的动态树形菜单，和分页的实现，源码加数据库，可直接运行。
使用Ztree实现java动态树形菜单
02-02
包括代码源文件，数据库，直接下载就可以直接运行，里面还包括分页的实现
动态创建树形菜单
qq_31971935的博客
10-13 874
前台：    后台：构建树形菜单  public void BindBorder()         {             #region 数据集             //获取缓存中所有模块             List SystemModules = GlobalRepertories.SystemModules;             //
SPA项目开发之动态树形菜单+数据表格+分页
qq_43588771的博客
08-13 316
SPA项目开发之动态树形菜单+数据表格+分页树形菜单数据表格+分页 树形菜单 LeftNav.vue <template> <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" activ...
vue+elementUI开发的h5商城项目.zip
10-21
在H5商城项目中，这些特性用于动态更新页面内容，比如商品列表、购物车状态等，当数据发生变化时，视图会自动更新，反之亦然。Element UI的组件如Table和Pagination可以与Vue的数据模型无缝对接，轻松实现数据的展示...
表格数据做分页的逻辑
04-27
在IT行业中，表格数据的分页处理是一项常见的需求，特别是在Web应用、数据分析或者数据库操作中。这个主题涉及到如何有效地管理和展示大量数据，确保用户能够高效地浏览和操作。以下是对"表格数据做分页的逻辑"这一...
springboot+mybatisplus+vue2+mysql+elementUI实现分页查询
最新发布
05-28
在本项目中，"springboot+mybatisplus+vue2+mysql+elementUI实现分页查询" 是一个基于现代Web开发技术栈构建的简单但功能完整的应用实例，旨在展示如何利用这些工具进行前后端交互，实现数据的分页查询。下面将详细...
vue+基于element-ui的表格封装组件
01-31
总的来说，这个"vue+基于element-ui的表格封装组件"是一个实践Vue组件化开发的好例子，它体现了Vue和Element-UI在实际项目中的应用价值，同时也是一个提升开发效率和代码质量的有效手段。无论是对于初学者还是有经验...
基于vue + elementUI的管理系统模板
02-22
- **分页和排序**：在处理大数据时，分页和排序功能是必不可少的，Element UI的表格组件提供了这些功能。 4. **开发流程**： - **环境配置**：安装Node.js、Vue CLI、Element UI等依赖，创建Vue项目并引入Element...
优雅的对树形结构进行高性能分页，闭包表才是yyds
方志朋的博客
03-04 343
一、定义的概述闭包表（Closure Table）是一种用于存储和查询树形数据结构的技术，它通过在关系表中记录树节点之间的直接和间接关系来表示节点之间的层次结构。闭包表的设计目的是支持高效的树遍历和查询操作。二、闭包表的特点闭包表通常是一个包含两个主要列的表：祖先列和后代列。每一行记录都表示一对节点之间的关系，其中祖先列存储父节点（或祖先节点）的标识，后代列存储子节点（或后代节点）的标识。通过在闭...
如何快速开发树形列表和分页查询整合的WInform程序界面
weixin_30419799的博客
02-17 205
我在做Winform界面的时候，一般都是统一化处理，界面顶部放置一些字段条件供查询，下面就是分页查询列表，展示相关的数据。但有时候碰到一些表字段内容分类比较多，有一些特别重要，如果放在一个树形列表来进行快速分类查询，用户体验应该更好。本篇随笔主要介绍如何快速实现树形列表和分页查询整合的WInform程序界面。 1、标准WInform列表界面 标准的查询条件+列表数据展示的WInform界面如下...
java freemarker遍历树形菜单(导航栏菜单)
zxm的博客
12-13 3271
最近在写框架，到了模板对树形的处理，从后台到前端有必要把整个过程记录下来 freemarker是一套模板引擎，主要用于数据的展示，你能看到这篇文章相信你对freemarker有所了解。 首先看我们的菜单(树形)数据结构 代码生成： import java.io.Serializable; import java.util.ArrayList; import java.util.Li
Java中树形菜单分析和实现
热门推荐
瘦子没有夏天
06-19 2万+
背景概述 最近在搭建基于Spring Boot(2.0.2)种子项目框架时，遇到了树形菜单加载问题。特此把解决的问题方案记录下去，供其他小伙伴参考和日后回顾。 方案分析 方案选择 一次性加载完，返回前台需要的数据结构 点击加载，默认记载根层级的菜单。后续点击那一级菜单加载其下的子节点 方案实现 在这里只分析一次性加载实现。第二种实现起来更简单。在这里略过。有兴趣可以自己研究一下...
spa+单页面应用+seo
09-16
SPA（单页面应用）在SEO（搜索引擎优化）方面相对较差。由于SPA只有一个主页面，而所有的内容都是通过ajax异步加载，搜索引擎爬虫很难获取到完整的页面信息。这导致搜索引擎很难对SPA进行正确的索引和排名。然而，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值