vue+element UI实现分页组件

Posted 2021-01-02 wangjiachen666

1.前言

在web页面中，常常需要将后台查询到的数据以表格形式展示出来，而这些数据量往往会非常庞大，如果将所有要展示的数据一次性请求获取并展示到页面上，那页面长度势必会变得非常的长，很不美观。更重要的是，如果数据量过于大，在页面加载时一次性请求全部数据将会耗费大量网络资源，性能极低。但是，如果我们可以将数据分页展示，这样页面首先不会变的冗长，另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大，这就极大的节省了网络资源，提高了性能。本文就以vue结合element UI实现一个数据分页组件。

2.环境准备

因为我们要实现的分页组件结合了element UI组件库，所以使用前必须安装element UI组件库（安装方式猛戳这里），博主采用的安装方式是按需引入，当然你也可以图省事选择完整引入。

element UI组件库安装完成后，我们还需要安装一下vue-resource插件，因为vue本身没有集成AJAX,所以我们要借助这个插件来发送AJAX请求，当然你也可以选择axios.

import Vue from ‘vue‘
import {Table,TableColumn,Pagination} from ‘element-ui‘;
import VueResource from ‘vue-resource‘
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
Vue.use(VueResource)

3.template模板部分

<template>
  <div class="logTab">
    <h1>操作日志</h1>
    <el-table
      :data="tableData"
      height="550"
      border>
      <el-table-column
        prop="time"
        label="日期"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="user_name"
        label="姓名"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="log_info"
        label="操作对象"
        align="center"
        width="500">
      </el-table-column>
      <el-table-column
        prop="log_type"
        label="操作类型"
        align="center"
        width="150">
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar pageBar">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout=" prev, pager, next,total"
        :total="total"
        background>
      </el-pagination>
    </el-col>
  </div>
</template>

解释：

<el-table-column
        prop="time"
        label="日期"
        width="200"
        align="center"
      >
</el-table-column>

上面代码中用<el-table-column></el-table-column>标签包裹的是表格的表头部分，其中：label=""表示表头要显示的文字，prop=""是后台返回用来填充表格的json数据的key值。后台返回的数据示例参考第五部分。

4.组件逻辑部分

<script>
  import Vue from ‘vue‘
  import {Table,TableColumn,Pagination} from ‘element-ui‘;
  import VueResource from ‘vue-resource‘
  Vue.use(Table);
  Vue.use(TableColumn);
  Vue.use(Pagination);
  Vue.use(VueResource)


  export default {
    name: "Log",
    data() {
      return {
        tableData: [],
        currentPage: 1,      //当前页
        total: 0,          //数据总条数
        pageSize: 10,        //每页显示的数据条数
      }
    },
    methods:{
      //该方法用来从后台拉取数据，以get方式请求
      //例如：默认每页显示10条数据，当用户点击页码1时，向后端请求第0~9条数据
      getData(){
        var start = (this.currentPage-1)*this.pageSize;       //请求的数据从第start条开始
        var end = this.currentPage*this.pageSize-1;              //到第end条结束
        this.$http.get(‘/api/v1/get_data/?start=‘+start+‘&end=‘+end).then(function (response) {
            this.tableData = response.body.logs
        },function (err) {
          console.log(err)
        })
      },
      //该方法当用户点击页码改变时触发，val为切换到的页码，页码变化后向后台请求新的数据
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getData();
      },
    },
    //该方法为组件创建前的钩子函数，主要用来初始化表格，当表格被加载出来即向后台先请求前10条数据
    beforeCreate:function () {
      this.$http.get(‘/api/v1/get_data/?start=0&end=10‘).then(function (response) {
          this.total = response.body.log_total;
          this.tableData = response.body.logs
      },function (err) {
        console.log(err)
      })
    }
  }
</script>

5.后端返回数据示例

要使表格组件能够被正确渲染，后端在收到前端的数据请求后应返回如下格式json数据：

{
    data_total:"",                      //该字段为数据库中数据的总条数
    data_list:[                            //该字段为填充表格的数据，以数组形式返回，数组中每个元素即为表格一行数据
            {
                time:"",                //该字段为表格中的一行数据，需要注意的是：这里的key需要与模板中表头的prop一致
                user_name:"",
                log_info:"",
                log_type:""
            },
            {
                time:"",
                user_name:"",
                log_info:"",
                log_type:""
            },
            {
                time:"",
                user_name:"",
                log_info:"",
                log_type:""
            }
            ...
    ]
}

（完）