Vue+element实现分页查询

1 使用环境

• Vue
• Element 新版

用element的组件el-pagination来实现表格分页操作

2 代码

el-pagination属性

  <el-pagination
      v-model:current-page="page.index"
      :page-size="page.size"
      layout="total,prev, pager, next"
      :total="page.total"
      @current-change="handleCurrentChange">
  </el-pagination>

page属性

page:{
        //当前页码
        index:1,
        //每页展示数据数目
        size:2,
        // 总共数据数目
        total:10
      },

页码改变值函数

 // 监听页码值改变事件
    handleCurrentChange(currentPage){
      // 改变当前页码
      console.log(currentPage)
      this.page.index = currentPage;
      console.log(this.page.index)
      // 重新获取数据
      this.getTableData()
    },

3 实现效果

实现效果图

4 踩坑

elpagination中的total属性没明白，将total设为2，我认识每页展示的数据直接由展示的表格决定，就没有设置page-size，无法点击页码的左右箭头。但是加上之后，就能点击。

因为页码的计算是由total总数来除每页显示的数据量得到的，所以page-size,total都需要进行绑定

element官网介绍

5 代码

<template>
    <el-pagination
      v-model:current-page="page.index"
      :page-size="2"
      layout="total,prev, pager, next"
      :total="3"
      @current-change="handleCurrentChange">
    </el-pagination>
</template>

<script>
import {defineComponent, reactive,ref} from "vue";
export default defineComponent({
    methods: {
        // 监听页码值改变事件
        handleCurrentChange(currentPage){
          // 改变当前页码
          console.log(currentPage)
          this.page.index = currentPage;
          console.log(this.page.index)
          // 重新获取数据
         this.getTableData()
        },
    },
    data() {
        return {
          //页码
          page:{
            //当前页码
            index:1,
            //每页展示数据
            size:2,
            // 总页数
            total:10
          },
        }
    }
})
    
</script>