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

最新推荐文章于 2022-04-25 16:39:22 发布
最新推荐文章于 2022-04-25 16:39:22 发布
阅读量1k 收藏
点赞数 2
分类专栏： VUE easyui 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52681702/article/details/121282543
版权
easyui 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
VUE
8 篇文章 0 订阅
订阅专栏

本期目标：

1、动态树功能

2、数据列表

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

一、树形菜单显示 

main.js注释

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

 leftNav.vue

  //定义一个数组，放所有的一级菜单
        menus:[]

 <!-- index里面填写的是路由跳转路径-->
                <el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">

数据库读取树状图数据 

 <el-menu 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 :index="'id_'+m.treeNodeId" v-for="m in menus">
                <template slot="title">
          <i :class="m.icon"></i>
          <span>{{m.treeNodeName}}</span>
          </template>
          <!-- index里面填写的是路由跳转路径-->
                <el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
          <i :class="m2.icon"></i>
          <span>{{m2.treeNodeName}}</span>
          </el-menu-item>
            </el-submenu>
        </el-submenu>
    </el-menu>

<template>
	<el-menu 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 :index="'id_'+m.treeNodeId" v-for="m in menus">
				<template slot="title">
          <i :class="m.icon"></i>
          <span>{{m.treeNodeName}}</span>
          </template>
          <!-- index里面填写的是路由跳转路径-->
				<el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
          <i :class="m2.icon"></i>
          <span>{{m2.treeNodeName}}</span>
          </el-menu-item>
			</el-submenu>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
		data(){
      return{
        collapsed:false,
        //定义一个数组，放所有的一级菜单
        menus:[]
      }
    },
    created(){
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      // 箭头函数解决了this 指针污染的问题
      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>

 二、列表查询

views目录下新建Articles.vue

<template>
  <div>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="文章id" width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章标题" width="300">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" width="300">
      </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>
  </div>
</template>
 
<script>
  export default {
    name:'Articles',
  	data(){
      return {
      listData:[]
      }
    },
    created() {
      let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
      // 箭头函数解决了this 指针污染的问题
      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>

  index.js配置路由

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

 {
              path: '/sys/Articles',
              name: 'Articles',
              component: Articles,
              }

  三、分页及查询

1、分页查询功能

<!-- 分页条-->
            <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>  


    <!-- 搜索筛选 -->
    <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>
 

Articles.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><strong></strong>
     <!--列表-->
        <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中"
          style="width: 100%;">
          <el-table-column align="center" type="selection" width="60">
          </el-table-column>
          <el-table-column sortable prop="id" label="文章ID" width="300">
          </el-table-column>
          <el-table-column sortable prop="title" label="文章标题" width="300">
          </el-table-column>
          <el-table-column sortable prop="body" label="文章内容" width="300">
          </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="formInline.total">
            </el-pagination>

  </div>
</template>

<script>
export default {
  name: 'Articles',
  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>

 2、定义组件中的数据和方法

<script>

  export default {
    name: 'Articles',
    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>

 

酱苓的码农之路
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据结构--动态查找树表
Meskjei的博客
07-15 679
文章目录二叉排序树概念查找算法插入算法删除算法被删除的节点时叶子节点被删除的节点只有左子树或只有右子树被删除的结点既有左子树，也有右子树查找性能的分析平衡二叉树概念构造平衡二叉树的方法性能分析 二叉排序树 概念 二叉排序树或者是一棵空树 或者是具有如下特性的二叉树： 若它的左子树不空，则左子树上所有结点的值均小于根结点的值; 若它的右子树不空，则右子树上所有结点的值均大于根结点的值; 它的左、右...
动态树总结
feiliboos
11-25 110
这一段时间写了蛮多动态树的题，link-cut tree写的我想吐了…… bzoj 1036[ZJOI2008]树的统计Count bzoj 2049[Sdoi2008]Cave 洞穴勘测 (因bzoj挂ing，未测) bzoj 2243[SDOI2011]染色 ural 1553Caves and Tunnels spoj 375 qtree Query on a tree sp...
查找（二）——动态查找树表
m0_52711790的博客
12-13 426
目录 一、二叉排序树 1、二叉排序树的概述 2、二叉排序树的插入 3、二叉排序树的构造 4、二叉排序树的删除 5、二叉排序树的查找 6、二叉排序树的代码实现 二、平衡二叉排序树（AVL树） 1、相关概念 2、平衡二叉排序树 3、平衡二叉排序树代码实现 三、B-树 1、背景知识 2、B树的定义 3、B树的插入、删除、查找操作 四、哈希表 1、打个比方认识哈希法 2、什么是哈希表 一、二叉排序树 1、二叉排序树的概述 二叉排序树（也称二叉查找树）：是一棵空的二叉树，或
动态树，三级，三个表
11-10
采用ajax技术实现了三级动态树，同时每一级对应一个表，完成的是一个学校：学院+专业（教研室）+班级
动态查找树表之B-树
liuxiang15的博客
09-18 710
【说明】博客内容选自课件内容和邓俊辉老师《数据结构下》课件内容 目录 1．B-树的定义 (1). 多叉特性 (2). 查找特性 (3). 平衡特性 2.查找算法： 3．插入操作 ​ 4．删除操作 1.所删的结点是最下层的内部结点 2. 所删结点不是最下层的内部结点 5．查找性能的分析 最大书高和最小树高 6. B-树的必要性 1．B-树的定义 B-树是一种满足以下特...
vue+layui实现select动态加载后台数据的例子
10-16
动态加载数据是Web开发中的常见需求，尤其是在单页应用中，经常需要与后端API进行交互，获取数据后动态更新页面内容。在Vue.js中，通常使用`axios`这个HTTP库来发送请求并处理响应数据。 ### 问题解决：时间差问题 ...
vue+elementUI开发的h5商城项目.zip
10-21
在H5商城项目中，这些特性用于动态更新页面内容，比如商品列表、购物车状态等，当数据发生变化时，视图会自动更新，反之亦然。Element UI的组件如Table和Pagination可以与Vue的数据模型无缝对接，轻松实现数据的展示...
资源前后端分离式分布式微服务架构项目CMS前端开发讲义+源码+视频
最新发布
03-03
本文详细介绍了资源前后端分离式分布式微服务架构项目中的关键技术点，包括 Vue.js 的使用技巧、Webpack 的搭建与使用、CMS 前端工程的创建以及分页查询的前端开发等内容。这些知识点对于理解和掌握现代 Web 开发...
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
10-20
在进行数据展示时，表格是不可或缺的组件之一。本文将介绍如何使用Vue.js实现一个具有多条件筛选、搜索、排序及分页功能的表格。 首先，实现表格功能时，我们需要分析需求，明确我们想要实现的功能点。一般来说，...
表格数据做分页的逻辑
04-27
在IT行业中，表格数据的分页处理是一项常见的需求，特别是在Web应用、数据分析或者数据库操作中。这个主题涉及到如何有效地管理和展示大量数据，确保用户能够高效地浏览和操作。以下是对"表格数据做分页的逻辑"这一...
动态树状图
07-25
html动态生成树状图;
element动态树表结构
chenlim87的博客
07-14 257
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D...
动态树形列表基本原理演示
weixin_34162695的博客
12-25 188
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>动态树形...
列表与树的处理
weixin_43177753的博客
04-25 725
最近做一个功能需要将数据库的数据转换成树结构，可以转换成树的数据往往数据库里的表字段含有parent_id这种代表关系，突发奇想，做一个泛型的树工具类，以后遇到这种结构都可以直接转换成树使用。
树列表下拉控件
hytlala的博客
09-07 385
简单做了一个树+列表通用控件，依赖jquery和ztree，效果如图： JS文件如下： /** * 树+列表组件化 * @author hyt * @version 1.00.00 */ (function ($) { $.extend({ treelist: { options: { check: { enable: false,
树形展示三级分类并分页：递归树形结构
weixin_50167266的博客
12-08 2026
今天在写一个项目的时候遇到了一个问题：如何写三级分类的接口？ 经过多方查询资料 我解决了该问题 前端页面如下： 数据库： 在实体类中添加children package com.example.humanresources.entity; import java.util.Date; import java.io.Serializable; import java.util.List; import lombok.Data; @Data public class BizProdu..
用recycleview实现多级列表
KWON_QMY的博客
12-10 672
package com.example.treelist2; import java.util.ArrayList; import java.util.List; public class Node<T> { /** * 当前节点id */ private String id; /** * 父节点id */ private String pid; /** * 节点数据实体类 */
spa+单页面应用+seo
09-16
SPA（单页面应用）在SEO（搜索引擎优化）方面相对较差。由于SPA只有一个主页面，而所有的内容都是通过ajax异步加载，搜索引擎爬虫很难获取到完整的页面信息。这导致搜索引擎很难对SPA进行正确的索引和排名。然而，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值