vue + element-ui实现分页效果

路过的假面骑士dcd

已于 2022-07-07 17:21:05 修改

阅读量558

点赞数 1

分类专栏： vue 文章标签： elementui javascript 前端 vue.js

于 2022-05-19 20:30:21 首次发布

本文链接：https://blog.csdn.net/wsdshdhdhd/article/details/124870707

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。

这是写在模板区的内容

<div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="query.pageIndex"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange">
      </el-pagination>
</div>

这是触发的事件

// 分页导航
    const handlePageChange = (val) => {
      console.log(val);
      query.pageIndex = val;
      getData();
    };

设置属性

 const query = reactive({
      pageIndex: 1,//默认页数
      pageSize: 5,//每页显示几条数据
    });

模拟请求数据（后端返回的是一大堆数据，需要使用slice方法）

//模拟请求
const tableData = ref([]);
fetchData(query, "/xxx/xxx/index").then((res) => {
        tableData.value = res.data.slice(
          (query.pageIndex - 1) * query.pageSize,
          query.pageIndex * query.pageSize
        );//实现分页，控制每页显示几条数据
        pageTotal.value = res.data.length;//显示几条数据

文章仅限参考如有错误请及时指出或补充！