Using vue to implement tree table paging

Table of contents

1. Preparations

2. Dynamic tree

2.1 In the configuration request path

2.2 Building a Navigation Menu Using Dynamic Data

2.2.1 Obtaining data through the interface

2.2.3 Building menu navigation through data obtained in the background

2.3 Click the menu to realize routing jump

2.3.1 Create a book management component

2.3.2 Configuring Routing

2.3.3 Modify the LeftAside component

2.3.4 Modify the Main component

3. System home page configuration

4. Tabular data display

4.1 Page Layout

4.2 Querying and displaying data in a table

4.3 Implement paging

---

1. Preparations

1. Create a test database
2. Prepare background service interface, Moudel query, and Book query (support paging)
3. Backend unit testing
4. Modify the vue configuration to use the real environment

2. Dynamic tree

2.1 In the configuration request path

Configure the request path for obtaining dynamic tree data in src/api/action.js

export default {
	//服务器
	'SERVER': 'http://localhost:8080/webserver',

	//登陆请求
	'SYSTEM_USER_DOLOGIN': '/userMsg/userAction!login.action', //登陆

	//获取动态树数据请求
	'SYSTEM_MODULE_REQ': '/sysMsg/sysMsgAction!getModules.action',

	//获取完整的请求地址
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}

}

2.2 Building a Navigation Menu Using Dynamic Data

2.2.1 Obtaining data through the interface

LeftAside.vue:

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

      //登录成功后默认显示系统首页
      this.$router.push("/Home");
    }

Test, check whether the data is obtained normally through the console:

2.2.3 Building menu navigation through data obtained in the background

2.2.3.1 Build a first-level navigation menu first

LeftAside.vue:

    <el-submenu v-for="(m1) in moduleDatas" :key="m1.id" :index="'index_'+m1.id">

      <template slot="title">
        <i :class="m1.icon"></i>
        <span slot="title">{
   
   {m1.text}}</span>
      </template>
      
   </el-submenu>

page effect:

2.2.3.2 Building a secondary navigation menu

LeftAside.vue:

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

page effect:

2.3 Click the menu to realize routing jump

2.3.1 Create a book management component

The function url has been configured in the t_module_vue table. For convenience, the book management component is defined as BookList. If you use other names, you need to modify the function url configuration to keep it consistent.

2.3.2 Configuring Routing

2.3.3 Modify the LeftAside component

2.3.4 Modify the Main component

3. System home page configuration

First create a home page component

The <router-view/> specified in the Main component is used to display each functional component.

Configure routing:

Configure the home menu:

the menu icon can be found on the official website.

Set the system home page to be displayed by default after successful login:

    <!--设置首页菜单及其图标，index设置的是Home组件的path-->
    <el-menu-item key="home" index="/Home">
      <i class="el-icon-s-home"></i>
      <span>首页</span>
    </el-menu-item>

4. Tabular data display

4.1 Page Layout

For the breadcrumbs, query conditions, tables, pagination and other spaces used on the page, you can view the element-ui official website. This step mainly focuses on page layout and does not bind data. After writing, observe the page effect.
BookList.vue:

<template>
  <div style="margin-left: 15px; margin-right: 15px;">

    <!--面包屑-->
    <el-breadcrumb style="margin-top:15px;" separator="/">
      <el-breadcrumb-item :to="{path: '/Home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--查询条件-->
    <el-form style="margin-top: 15px;" :inline="true" class="demo-form-inline">
      <el-form-item label="书名">
        <el-input placeholder="书名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="primary">新增</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table style="width: 100%;" :border="true" max-height="550">
      <el-table-column prop="id" label="编号" min-width="40" align="center"></el-table-column>
      <el-table-column prop="bookname" label="名称" min-width="100" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" min-width="70" align="center"></el-table-column>
      <el-table-column prop="booktype" label="类型" min-width="70" align="center"></el-table-column>
    </el-table>

    <!--分页-->
    <div class="block" style="text-align:right;margin-top:10px;">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

4.2 Querying and displaying data in a table

Regardless of paging, get data from the background interface and bind it to the table display.

1. Configure the interface for querying book information to api/action.js

//获取书本信息
 'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',

1. BookList.vue component
   Figure 1: template part:

Figure 2: The script part

  export default {
    name: 'BookList',

    data: function() {
      return {
        bookname: '',
        books: []
      }
    },

    methods: {
      qry: function() {
        let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
        this.axios.post(url, {
          bookname: this.bookname
        }).then(resp => {
          console.log(resp);
          this.books = resp.data.data;
          
        }).catch(error => {
          console.log(error);
        });
      }
    }
  }

4.3 Implement paging

template part:

    <!--分页-->
    <div class="block" style="text-align:right;margin-top:10px;">
      <!--
      @size-chang: 定义在每页显示的记录数变化时的处理函数
      @current-change：当前页码发生变化时的处理函数，如点击页码或输入一个特定页码。
      :current-page：指定当前页，
      :page-size：每页显示的记录数
      layout： 布局，可以通过调整该项来调整显示内容
      :total： 总记录数
      -->
      <el-pagination background
        @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>

The script part, Figure 1

      qry: function() {
        let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
        this.axios.post(url, {
          bookname: this.bookname,
          //分页参数
          page: this.page,
          rows: this.rows
        }).then(resp => {
          console.log(resp);
          this.books = resp.data.data;
          //获取总页数
          this.total = resp.data.total;
        }).catch(error => {
          console.log(error);
        });
      }

The script part, Figure 2:

      //当每页显示的记录数发生变化时，设置当前页码为1，执行查询。
      handleSizeChange: function(rows) {
        this.rows = rows;
        this.page = 1;
        this.qry();
      },

      //当前页码发生变化时，执行查询
      handleCurrentChange: function(page) {
        this.page = page;
        this.qry();
      }