【Vue】动态树与数据表格分页查询实现

最新推荐文章于 2024-04-19 12:18:43 发布

云村小威

最新推荐文章于 2024-04-19 12:18:43 发布

阅读量831

点赞数 28

分类专栏： Vue+ElementUI 文章标签： java vue.js 前端框架 javascript

本文链接：https://blog.csdn.net/Justw320/article/details/133313310

版权

Vue+ElementUI 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、动态树

1.1 准备工作

1.1.1 准备数据库

1.1.2 准备好后台服务接口，Moudel查询，和Book查询（支持分页）

1.2.2 通过后台获取的数据构建菜单导航

一、动态树

1.1 准备工作

1.1.1 准备数据库

1. 左侧导航栏

2. 书籍表

1.1.2 准备好后台服务接口，Moudel查询，和Book查询（支持分页）

1.1.3 修改mock.js测试环境

1.1.4 配置请求路径

在src/api/action.js中配置获取动态树数据的请求路径

'SYSTEM_MODULE_REQ': '/module/queryRootNode', //左侧菜单

1.2 构建导航菜单

1.2.1 通过接口获取数据

LeftNav.vue：

    //声明周期钩子函数，此时的Vue实例已经创建，且data和methods已经创建，但没有开始编译模板
    //利用该钩子函数获取动态树数据
    created: function() {
      let url = this.axios.urls.SYSTEM_MODULE_REQ;
      this.axios.get(url, {}).then(resp => {
        console.log(resp.data);
        //在data中声明moduleDatas数组，接收返回的数据，以便于在template中使用数据双向绑定
        this.moduleDatas = resp.data.rows;
      }).catch(resp => {});

    }

通过打印resp.data数据，在控制台查看数据是否正常获取：

1.2.2 通过后台获取的数据构建菜单导航

动态生成菜单：

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#ffbf00" 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/imgs/logo.png" alt="">
    </div>

    <el-submenu v-for="m in moduleDatas" :key="'key_'+m.id" :index="'index_'+m.id">
      <template slot="title">
        <i :class="m.icon"></i>
        <span slot="title">{{m.text}}</span>
      </template>
      <!--
       使用v-for生成二级导航菜单，index为功能url值，二级菜单为叶子节点，为具体功能的功能菜单，
       所以url一定有值（一级菜单的url为空）。
       测试数据二级菜单没有分组，所以不用el-menu-item-group，只要生成el-menu-item即可。
       -->
      <el-menu-item v-for="m2 in m.modules" :key="m2.id" :index="m2.url">
        <span>{{m2.text}}</span>
      </el-menu-item>
    </el-submenu>

  </el-menu>
</template>

1.3 点击菜单实现路由跳转

1.3.1 创建书本管理组件

在数据库中t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。

1.3.2 配置路由

1.3.3 修改LeftNav组件

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

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

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

1.3.4 修改AppMain组件

1.3.5 效果展示

二、表格数据分页显示

2.1 前端页面和分页实现

页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。

BookList.vue：

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称 : ">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" plain @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></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" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        background :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,
        total: 0,
        page: 1
      }
    },
    methods: {
      handleSizeChange(r) {
        //当页大小发生变化
        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
        }
        // console.log(params)
        this.query(params);
      },
      query(params) {
        //获取后台请求书籍数据的地址
        let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
        this.axios.get(url, {
          params: params
        }).then(d => {
          this.tableData = d.data.rows;
          this.total = d.data.total;
        }).catch(e => {});
      },
      onSubmit() {
        let params = {
          bookname: this.bookname
        }
        console.log(params)
        this.query(params);
        this.bookname = ''
      }
    },
    created() {
      this.query({})
    }
  }
</script>

<style>
</style>