AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【Vue.js】使用ElementUI搭建动态树&数据表格与分页

2023-11-14 325
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue.js】使用ElementUI搭建动态树&数据表格与分页

一，动态树

本文章为上一篇文章拓展内容==》》实现首页导航及左侧菜单

将左侧菜单结构更换为下面代码：

菜单结构：

<el-menu>
  <el-submenu index="" key="">
        <template slot="title">
            <i class=""></i>
            <span></span>
        </template>
    <el-menu-item index="" key="">
            <i class=""></i>
            <span></span>
        </el-menu-item>
  </el-submenu>
</el-menu>

第一级节点el-submenu中key属性唯一，index属性唯一，而index属性用于控制菜单折叠； 第二级节点el-menu-item中key属性唯一，index属性唯一，而index属性用于控制页面跳转；

配置action.js

action.js:

'SYSTEM_MENUS': '/module/queryRootNode',   //左侧动态树

vue+element的el-menu组件实现路由跳转及当前项的设置:

<el-menu router :default-active="$route.path">
</el-menu>

注1：要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转

注2：导航当前项，在el-menu标签中绑定 :default-active="$route.path"，注意是绑定属性，不要忘了加“:”，当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

注3：el-submenu标签中的url属性不能为空，且不能相同，否则会导致多个节点收缩/折叠效果相同的问题

1.1 前端导航菜单

<template>
  <el-menu router :default-active="$route.path" 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 v-for="m in menus" :index="'idx_'+m.id" :key="'Key1'+m.id">
        <template slot="title">
          <i :class="m.icon"></i>
          <span>{{m.text}}</span>
        </template>
        <el-menu-item v-for="m2 in m.modules" :index="m2.url" :key="'Key2_'+m2.id">
          <i :class="m2.icon"></i>
          <span>{{m2.text}}</span>
        </el-menu-item>
      </el-submenu>
  </el-menu>
</template>

1.2 后端数据controller：

package com.zking.ssm.controller;
import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import com.zking.ssm.vo.BookFileVo;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/book")
public class BookController {
    @Autowired
    private IBookService bookService;
    @RequestMapping("/addBook")
    @ResponseBody
    public JsonResponseBody<?> addBook(Book book){
        try {
            bookService.insert(book);
            return new JsonResponseBody<>("新增书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("新增书本失败",false,0,null);
        }
    }
    @RequestMapping("/editBook")
    @ResponseBody
    public JsonResponseBody<?> editBook(Book book){
        try {
            bookService.updateByPrimaryKey(book);
            return new JsonResponseBody<>("编辑书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("编辑书本失败",false,0,null);
        }
    }
    @RequestMapping("/delBook")
    @ResponseBody
    public JsonResponseBody<?> delBook(Book book){
        try {
            bookService.deleteByPrimaryKey(book.getId());
            return new JsonResponseBody<>("删除书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("删除书本失败",false,0,null);
        }
    }
    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Book> books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }
    @RequestMapping("/queryBookCharts")
    @ResponseBody
    public JsonResponseBody<?> queryBookCharts(){
        try{
            Map<String, Object> charts = bookService.queryBookCharts();
            return new JsonResponseBody<>("OK",true,0,charts);
        }catch (Exception e){
            e.printStackTrace();
            return new JsonResponseBody<>("查询统计分析数据失败",false,0,null);
        }
    }
    @RequestMapping("/upload")
    @ResponseBody
    public JsonResponseBody<?> upload(BookFileVo bookFileVo){
        try {
            MultipartFile bookFile = bookFileVo.getBookFile();
            System.out.println(bookFileVo);
            System.out.println(bookFile.getContentType());
            System.out.println(bookFile.getOriginalFilename());
            return new JsonResponseBody<>("上传成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("上传失败",false,0,null);
        }
    }
    @RequestMapping("/download")
    public void download(HttpServletRequest request, HttpServletResponse response){
        try {
            String relativePath = "uploads/1.jpg";
            String absolutePath = request.getRealPath(relativePath);
            InputStream is = new FileInputStream(new File(absolutePath));
            OutputStream out = response.getOutputStream();
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
            byte[] by = new byte[1024];
            int len = -1;
            while (-1 != (len = is.read(by))) {
                out.write(by);
            }
            is.close();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    @RequestMapping("/downloadUrl")
    public void downloadUrl(HttpServletRequest request, HttpServletResponse response){
        String relativePath = "uploads/1.jpg";
        String absolutePath = request.getRealPath(relativePath);
        InputStream is = null;
        OutputStream out = null;
        try {
            is = new FileInputStream(new File(absolutePath));
            // 设置Content-Disposition
            response.setHeader("Content-Disposition",
                    "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
            out = response.getOutputStream();
            IOUtils.copy(is, out);
            response.flushBuffer();
            System.out.println("完成");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            IOUtils.closeQuietly(is);
            IOUtils.closeQuietly(out);
        }
    }
}

1.3 数据绑定

<script>
  export default {
    data() {
      return {
        collapsed: false,
        menus: []
      }
    },
    created() {
      this.$root.Bus.$on('aaa', r => {
        this.collapsed = r;
      });
      let url = this.axios.urls.SYSTEM_MENUS;
      this.axios.get(url, {}).then(r => {
        console.log(r);
        this.menus = r.data.rows;
      }).catch(e => {
      })
    }
  }
</script>

1.4 路由绑定页面编写

2.3.1 编写vue界面以便数据的显示与跳转：

AddBook:

<template>
  <h1>书籍新增</h1>
</template>
<script>
</script>
<style>
</style>

BookList.vue:

<template>
   <div>
    <!-- 上搜索框 -->
  <div class="books">
      <el-form :inline="true" class="demo-form-inline" style="margin-top: 40px; margin-left: 20px;">
        <el-form-item label="书本名称">
          <el-input v-model="bookname" placeholder="请输入书本名称..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  <!-- 中 数据表格 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="书本编号" width="180"></el-table-column>
    <el-table-column prop="bookname" label="书本名称" width="180"></el-table-column>
    <el-table-column prop="price" label="书本价格"></el-table-column>
    <el-table-column prop="booktype" label="书本类型"></el-table-column>
  </el-table>
  <!-- 下 分页条 -->
  <div class="block">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
      </div>
</template>

在index.js路由绑定页面

在index.js配置：

indedx.js总代码：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'
Vue.use(Router)
export default new Router({
  routes: [{
    path: '/',
    name: 'Login',
    component: Login
  }, {
    path: '/Register',
    name: 'Register',
    component: Register,
  }, {
    path: '/AppMain',
    name: 'AppMain',
    component: AppMain,
    children: [{
      path: '/LeftNav',
      name: 'LeftNav',
      component: LeftNav
    }, {
      path: '/TopNav',
      name: 'TopNav',
      component: TopNav
    }, {
      path: '/book/AddBook',
      name: 'AddBook',
      component: AddBook
    }, {
      path: '/book/BookList',
      name: 'BookList',
      component: BookList
    }]
  }]
})

二，数据表格与分页

首先我们分析一下，我们右侧有那些内容？然后去到我们ELementUI官网查找相对应的案例代码，我们首先需要一个form表单提供我们输入书籍名称进行模糊查询，还需要数据表格展示数据，其次就是底部的分页条来完成分页效果，知道了需求我们直接去找案例代码即可

2.1 后端接口定义Controller:

@RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Book> books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }

action.js文件添加下列接口

'BOOK_LIST': '/book/queryBookPager', //书籍查询

2.2 前端编写：

<template>
   <div>
    <!-- 上搜索框 -->
  <div class="books">
      <el-form :inline="true" class="demo-form-inline" style="margin-top: 40px; margin-left: 20px;">
        <el-form-item label="书本名称">
          <el-input v-model="bookname" placeholder="请输入书本名称..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  <!-- 中 数据表格 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="书本编号" width="180"></el-table-column>
    <el-table-column prop="bookname" label="书本名称" width="180"></el-table-column>
    <el-table-column prop="price" label="书本价格"></el-table-column>
    <el-table-column prop="booktype" label="书本类型"></el-table-column>
  </el-table>
  <!-- 下 分页条 -->
  <div class="block">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
      </div>
</template>
<script>
  export default{ 
    data(){
      return{
        bookname:'',
        tableData:[],
        rows:10,
        page:1,
        total:0
      }
    },
    methods:{
      query(params){
      let url=this.axios.urls.Book_LIST;
      this.axios.get(url,{params:params}).then(r=>{
        console.log(r);
        this.tableData=r.data.rows;
        this.total=r.data.total;
      }).catch(e=>{
      })  
      },
       onSubmit(){
         let params={
          bookname:this.bookname
         }
         this.query(params);
       }, 
       //当页大小发生变化
       handleSizeChange(r){
         console.log("当前源码")
         let params={
          bookname:this.bookname,
        rows:r,
        page:this.page
         }
         this.query(params)
       },
       //当前页码发生变化
       handleCurrentChange(p){  
         let params={
          bookname:this.bookname,
          rows:this.rows,
          page:p
         }
         this.query(params);
       }
    },
    created(){
      this.query({});
    }
  }
</script>

效果图：

文章标签：
JavaScript
前端开发
关键词：
JavaScript数据
JavaScript表格
VUE.js数据
JavaScript分页
VUE.js表格
Love-Java.
目录
相关文章
小白学大数据
|
10月前
|
Web App开发 数据采集 JavaScript
动态网页爬取：Python如何获取JS加载的数据？
动态网页爬取：Python如何获取JS加载的数据？
小白学大数据
1521 58
光明顶阳顶天
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
657 161
爱心发电丶
|
11月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件，支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展，提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
爱心发电丶
947 6
CamilleKing
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
669 156
CamilleKing
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
701 157
小宋1021
|
12月前
|
SQL JavaScript 前端开发
Vue实现动态数据透视表（交叉表）
Vue实现动态数据透视表（交叉表）
小宋1021
517 13
奔跑的数据
|
数据采集 前端开发 JavaScript
金融数据分析：解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术，从金融网站（如东方财富网）抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent，突破反爬机制；借助Selenium等待页面渲染，精准定位动态数据。同时，提供了常见错误解决方案及延伸练习，帮助读者掌握金融数据采集的核心技能，为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱，确保数据抓取高效稳定。
奔跑的数据
399 17
游客lijmi4663rgsa
|
JavaScript 前端开发 API
管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器，是不是很棒？不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
729 0
游客lijmi4663rgsa
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘，比如defineProperty与Proxy的区别，比如vue2与vue3实现数据劫持的方式有什么不同，实现效果有哪些差异等，这篇博文只是入门，以后有时间再深挖。 博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
233 0
游客lijmi4663rgsa
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用，JS中数组过滤器的使用详解（附实际应用代码）
用array.filter(）来实现数据筛选、数据清洗和链式调用，相对于for循环更加清晰，语义化强，能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
1114 0

热门文章

最新文章

  • 1
    Ant Design Vue设置表格滚动 宽度自适应 不换行
  • 2
    vue3的ref和Ref以及reactive
  • 3
    VUE基础知识：Vue.js和React的主要区别是什么？
  • 4
    1分钟带你快速上手 Vue3.0+TypeScript
  • 5
    如何从 Vue CLI 迁移到 Vite
  • 6
    从零开始vue使用cesium开发3d地形terrainProvider（二）
  • 7
    VUE element-ui之table表格勾选复选框动态合计某列的值
  • 8
    Vue3-TypeScript-事件-计算属性用法
  • 9
    如何在Vue3项目中集成ESLint+Prettier+Stylelint+Husky?
  • 10
    Vue的工作原理是什么？底层原理是什么？
  • 1
    基于ssm+vue.js的中国咖啡文化宣传网站附带文章和源代码设计说明文档ppt
    268
  • 2
    基于ssm+vue.js的铁岭河医院医患管理系统附带文章和源代码设计说明文档ppt
    178
  • 3
    基于ssm+vue.js的校园代购服务订单管理系统附带文章和源代码设计说明文档ppt
    271
  • 4
    基于ssm+vue.js的海鲜自助餐厅系统附带文章和源代码设计说明文档ppt
    183
  • 5
    基于ssm+vue.js的农家乐信息平台附带文章和源代码设计说明文档ppt
    153
  • 6
    基于ssm+vue.js的德云社票务系统附带文章和源代码设计说明文档ppt
    175
  • 7
    基于ssm+vue.js的个人博客网站附带文章和源代码设计说明文档ppt
    225
  • 8
    基于ssm+vue.js的高校共享单车管理系统附带文章和源代码设计说明文档ppt
    302
  • 9
    基于ssm+vue.js的智慧城市实验室主页系统附带文章和源代码设计说明文档ppt
    215
  • 10
    基于ssm+vue.js的lw管理系统附带文章和源代码设计说明文档ppt
    145

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • JavaScript入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • Javascript中的函数
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    计网 - 图解OSI 七层模型 和 TCP/IP 四层模型