Vue+ElementUi实现分页效果

注：后台我是用pageHelper分页插件做的

效果图：

首先配置依赖

<!--pageHelper分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.13</version>
        </dependency>

在控制器中：

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;


@RestController
@RequestMapping("/drug")
@CrossOrigin
public class DrugController {


    @Autowired
    private DrugService drugService;

    //查询数据
    @RequestMapping("queryDrug")
    public PageInfo queryDrug(Integer currentPage, Integer pageSize) {
     
        //调用PageHelper.startPage()进行分页
       PageHelper.startPage(currentPage,pageSize);
        //查询数据   直接查询就行
       List<Drug>drugList=drugService.queryDrug();
        //将数据返回前端
       PageInfo pageInfo=new PageInfo(drugList);
       return pageInfo;
    }
}

App.Vue页面代码

<template>
   <div id="app">
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed prop="id" label="序号">
        <!--如果想要对当前字段进行转换，需要用到template-->
        <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>
        <el-table-column prop="drugName" label="药品名称" ><template slot-scope="scope">{{ scope.row.drugName }}</template></el-table-column>
        <el-table-column prop="drugPrice" label="药品价格" ><template slot-scope="scope">{{ scope.row.drugPrice }}</template></el-table-column>
        <el-table-column prop="drugSales" label="药品销量" ><template slot-scope="scope">{{ scope.row.drugSales }}</template></el-table-column>
        <el-table-column prop="drugStock" label="药品库存" ><template slot-scope="scope">{{ scope.row.drugStock }}</template></el-table-column>
        <el-table-column prop="isOTC" label="是否处方药" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.isOTC == null ? "" : scope.row.isOTC == 1?"是":"否"}}</template>
        </el-table-column>
        <el-table-column prop="person" label="适用人群" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.person == null ? "" : scope.row.person.replace("1","小孩").replace("2","少年").replace("3","青年").replace("4","中年").replace("5","老年").replace("6","僵尸")}}</template>
        </el-table-column>
        <el-table-column prop="areaName" label="地区" ></el-table-column>
        <el-table-column prop="brandName" label="品牌" ></el-table-column>
        <el-table-column prop="producedDate" label="生产时间" ><template slot-scope="scope">{{ scope.row.producedDate }}</template></el-table-column>
        <el-table-column prop="createtime" label="创建时间" ><template slot-scope="scope">{{ scope.row.createtime }}</template></el-table-column>
        <el-table-column prop="updatetime" label="修改时间" ><template slot-scope="scope">{{ scope.row.updatetime }}</template></el-table-column>
        <el-table-column prop="photo" label="图片" show-overflow-tooltip>
          <template slot-scope="scope"><img :src="scope.row.photo"/></template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    <!--分页-->
       <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="1"
       :page-sizes="[5, 10, 15, 20]"
       :page-size="5"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total">
      </el-pagination>
  </div>
</template>

<script>
  export default {
     name:'App',
    created(){
      this.queryDrug();

    },
    data(){
      return {
        tableData:[],
        multipleSelection: [],
        total:0,
        currentPage:1,
        pageSize:5
      }
    },
    methods:{
      //查询
      queryDrug:function () {
        var _this = this;
        this.$axios.get("http://localhost:8080/drug/queryDrug?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(function (result) {
          _this.tableData = result.data.list;
          _this.total=result.data.total;
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //每页条数
      handleSizeChange(val){
        this.pageSize=val;
        this.queryDrug();
      },
      //当前页
      handleCurrentChange(val){
        this.currentPage=val;
        this.queryDrug();
      }
    }
  }
</script>