Vue里数组对象数据进行排序且手动分页

最新推荐文章于 2023-10-02 12:03:34 发布

cksdyp

最新推荐文章于 2023-10-02 12:03:34 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50158618/article/details/123820419

版权

一般情况下，数据从后端获取时，添加分页参数，可以进行分页，有些情况下，后端直接返回所有的数据，这时我们需手动分页，然后有需求时可以进行排序。

比如我这边项目的一个模块为例，需要合并请求且按时间排序再加手动分页，实际效果如下：

实现代码如下：

// data 里面的数据
data() {
    return {
        warningLoading: false,  // 控制显示加载
        allContactWarnList: [],  // 所有的数据列表
        theContactWarnList: [],  // 当前显示的数据列表
        personImgQuery: {},    // 请求1的参数
        stationWarnQuery: {},  // 请求2的参数
        warnPage: {     // 手动设置的分页参数
            pageSize: 5,
            pageNum: 1
        },
        allConcatTotal: 0  // 所有的数据长度
    }
}

// methods 里面的方法
theGetWarningPersonInfoReq(query) {
    return this.$http.getPersonWarnInfo(query);
},
// 合并请求 获取的数据
contactGetWarnList() {
  let that = this;
  that.warningLoading = true;
  that.allContactWarnList = [];
  that.theContactWarnList = [];
  axios
       .all([
             that.theGetWarningPersonInfoReq(that.personImgQuery),
             that.theGetWarningPersonInfoReq(that.stationWarnQuery)
             ])
                .then(
                    axios.spread(function(person, station) {
                        if (person.data.flag == 1 && station.data.flag == 1) {
                            if (person.data.data && station.data.data) {
                                let allList = [];
                                allList = person.data.data.concat(
                                    station.data.data
                                );
                                allList.forEach(item => {
                                    let obj = {
                                        url: item.snop_photos,
                                        name: item.name,
                                        cardId: item.card_id,
                                        place: item.pass_place,
                                        time: item.pass_time,
                                        type: item.data_sources
                                    };
                                    that.allContactWarnList.push(obj);
                                });
                                that.allContactWarnList = that.allContactWarnList.sort(
                                    that.sortTimeFunction('time', 'yyyy')
                                );
                                that.allConcatTotal =
                                    that.allContactWarnList.length || 0;
                                that.theContactWarnList = that.allContactWarnList.slice(
                                    0,
                                    that.warnPage.pageSize
                                );
                                that.warningLoading = false;
                            }
                        } else {
                            that.warningLoading = false;
                        }
                    })
                );
        },
// 时间排序方法   type 为 yyyy 表示yyyy-mm-dd 这样的格式化时间
sortTimeFunction(time, type) {
            return function(a, b) {
                if (type == 'yyyy') {
                    let start = new Date(a[time]).getTime();
                    let end = new Date(b[time]).getTime();
                    return end - start;
                } else {
                    return b[time] - a[time];
                }
            };
        },
// 手动分页
changeWarnListPage(newPage) {
            let star;
            let end;
            this.theContactWarnList = [];
            star = (newPage - 1) * this.warnPage.pageSize;
            end = newPage * this.warnPage.pageSize;
            this.warnPage.pageNum = newPage;

            this.theContactWarnList = this.allContactWarnList.slice(
                star,
                end > this.allConcatTotal ? this.allConcatTotal : end
            );
        }

以上就是请求部分做的数据处理，仅代表个人见解，进行记录分享。