element-ui分页组件的bug

最新推荐文章于 2024-12-08 11:36:24 发布

追光者de码农

最新推荐文章于 2024-12-08 11:36:24 发布

阅读量1.3k

点赞数 1

分类专栏： vue element-ui 文章标签： ui elementui vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48016008/article/details/122036098

版权

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

element-ui

1 篇文章

订阅专栏

本文介绍Element-UI中table组件分页查询时出现的BUG及其解决方案。当查询条件变化导致总页数减少时，如何确保正确展示数据及分页标签。提供了一个实用的查询函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui中的table表格进行分页查询时，会出现组件bug。

**
问题：
例如：在第一次查询后跳转到第四页，此时再进行新的条件查询，若该条件查询到的数据只有三页，查询时入参page: 4，即该页无数据，页面展示无数据。

解决方案：

错误方案：

在查询函数中，点击查询按钮时使page: 1，进行传参。
结果：进行问题复现操作，页面显示第一页数据，底部分页标签却停留在第四页。
仍然是有问题的。

正确解决方案：

进行问题复现操作时（再次进行查询时），依然传参page: 1，写回滚代码，判断该条件查询到的数据有多少页：
小于当前页（数量）则展示最后一页，底部分页标签却停留在最后一页。
大于当前页（数量）则展示当前页，底部分页标签却停留在当前页。

定义字段：

 data() {
    return {
      loading: false,
      queryForm: {},
      tableData: [],
      pagination: {
        page: 1,
        size: 10,
        total: 0,
        layout: 'total, sizes, prev, pager, next, jumper',
      },
    };
  },

查询函数：

getPageData(request, params = {}) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        this.bindRequest(request, params);
        const reqData = {
          ...this.queryForm,
          ...params,
          size: this.pagination.size,
          page: this.pagination.page,
        };

        _request(reqData).then((res) => {
          console.log('分页数据', reqData, res.data);
          if (res.data) {
            this.pagination = {
              ...this.pagination,
              size: res.data.size,
              total: res.data.totalElements || res.data.total,
            };

            // 如果当前页查询不到数据，直接查询上一页的数据
            if (res.data.totalPages > 0 && res.data.totalPages < this.pagination.page) {
              this.pagination.page = res.data.totalPages;
              this.getPageData();
            }

            this.tableData = res.data.content || res.data.list || res.data || [];
          } else {
            this.pagination = {
              ...this.pagination,
              size: 10,
              total: 0, // 总数
            };
            this.tableData = [];
          }
          this.loading = false;
          resolve(res);
        }).catch((e) => {
          this.pagination = {
            ...this.pagination,
            size: 10,
            total: 0, // 总数
          };
          this.tableData = [];
          this.loading = false;
          reject(e);
        });
      });
    },