VUE3 +elementplus 分页功能实现

1.引入分页组件

     <!--分页组件-->
    <div style="padding: 10px 0">
      <el-pagination
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :page-sizes="[2, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

2.实现逻辑，数据有后端获取

<script>
import {reactive, ref, toRefs} from "vue";
import axios from 'axios';
​
export default {
  setup() {
    //data为表数据
    const data = reactive({
      userInfo: [
        {
          uid: 1,
          username: "星星",
          account: "123",
          password: "123",
        },
        {
          uid: 2,
          username: "月亮",
          account: "456",
          password: "456",
        },
      ],
    });
​
    //table当前分页参数
    const total = ref(0) //总条数
    const page = reactive({//配置对应的查询参数
      pageNum: 1,
      pageSize: 2,
    });
​
    // 向后端获取表格数据(分页)
    const getList = () => {
      axios.get('/getList',{
        pageNum : page.pageNum,
        pageSize : page.pageSize
      }).then(res => {
        console.log(res.data.data)
        data.userInfo = res.data.data
        total.value = res.data.total
      })
    };
    getList();
    const handleSizeChange = (val) => {
      page.pageSize = val
      console.log(val)
      getList();
    }
    const handleCurrentChange = (val) => {
      page.pageNum = val
      console.log(val)
      getList();
    }
​
    return {
      ...toRefs(data),
      ...method,
      total,
      page,
      getList,
      handleSizeChange,
      handleCurrentChange
    };
  },
};
</script> 

小结

实现分页非常简单，获取当前页的页数，从而将页数与后端的接口相对应，从而获取数据，数据总量也需要从后端的接口中获得