vue + element-ui实现分页效果

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

这是写在模板区的内容

这是触发的事件

// 分页导航
    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;//显示几条数据

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