vue中结合element-ui的Pagination 分页组件写出后端给所有数据前端进行分页和有筛选条件的功能（前端数据分页）

最新推荐文章于 2024-06-07 12:17:46 发布

badboy__biubiubiu

最新推荐文章于 2024-06-07 12:17:46 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/kjssjj12/article/details/94839043

版权

vue中结合element-ui的Pagination 分页组件写出后端给所有数据前端进行分页和有筛选条件的功能（前端数据分页）

前言
昨天接到后端的一个获取接口，产品有分页，至今搞不懂为何后端竟然说出让我惊讶好久的话说是基于性能考虑来着
我只能回复一个问号，后面就是各种的讨论了，好吧，对于性能我的看法是在前端分页的话肯定要在前端各种操作数据，如果数据量复杂（几百条应该还好吧），那肯定会导致渲染慢从而耗费大量的内存，有时可能会让页面卡死，以前有做过获取列表的接口有几千条数据，直接卡死，页面都动不了，但是没办法，后台说卡死再执行planB,还是得前端做分页筛选，好吧，要做咱就做，咱也没慌过，又不是做不了对吧，
直奔主题
第一步肯定是要先缕下思路确定要处理多少东西得吧：
思维图
有下拉状态筛选有输入关键字搜索有时间排序还有分页四个逻辑处理，后端就查个表直接返回所有数据
第二步 明白了要做的事，咱就一步步处理呗，先是从获取所有数据的初始化开始直接上代码和注释呗
//获取数据

        getChannelList(){
         
            this.loading = true
            this.$axios.get(`请求路径`).then(res => {
                console.log(res);
                this.loading = false;   //lonading效果  v-loading
                if(res.data.code==='200'){

                    this.listData = res.data.data || [];
                    this.totalRowCount = res.data.data.length

                    //前端分页  第一次取的是初始的页码1  和pageSize数分页
                    this.listData = this.listData.filter((item,index)=>index+1<=this.pageSize);
                    this.listDataBf = JSON.stringify(res.data.data);    // 这个很重要，必须要备份深拷贝所有数据  咱把他变成字符串形式就可以打断堆类型的引用浅拷贝问题啦
                }else {
                    this.$message.error(res.data.msg)
                }


            })
        },

第三步处理逻辑
//分页

        getPageList(){
            //前端分页
            //先筛选出筛选项的所有数据再进行分页筛选
            this.listData = JSON.parse(this.listDataBf).filter((item,index)=>{
                let statusFlag = this.channelListStatus==='全部'?true:item.channelEnabled===this.channelListStatus;
                //关键字搜索
                let searchFlag = item.corporation.indexOf(this.searchVal)>-1 || item.indChannelName.indexOf(this.searchVal)>-1 || item.managerName.indexOf(this.searchVal)>-1
                //关键字匹配标红
                let replaceReg = new RegExp(this.searchVal, 'g');
                let replaceString = '<span class="search-text">' + this.searchVal + '</span>';
                if(item.corporation.indexOf(this.searchVal)>-1){
                    this.$set(item,'corporation',item.corporation.replace(replaceReg, replaceString))
                }
                if(item.indChannelName.indexOf(this.searchVal)>-1){
                    this.$set(item,'indChannelName',item.indChannelName.replace(replaceReg, replaceString))
                }
                if(item.managerName.indexOf(this.searchVal)>-1){
                    this.$set(item,'managerName',item.managerName.replace(replaceReg, replaceString))
                }
                return   statusFlag && searchFlag

            });
            this.totalRowCount = this.listData.length;
            this.listData = JSON.parse(JSON.stringify(this.listData)).filter((item,index)=>{
                let pageFlag = index+1<=this.pageNo*this.pageSize&&index+1>(this.pageNo-1)*this.pageSize;
                return pageFlag

            });
        },
        //下拉筛选
        channelListStatusChange(val){
            if(!JSON.parse(this.listDataBf)||!JSON.parse(this.listDataBf).length) return; // 容错
            this.pageNo = 1;
            //先筛选出筛选项的所有数据
            this.listData = JSON.parse(this.listDataBf).filter((item,index)=>{
                if(val!=='全部') {
                    return item.channelEnabled===val
                }else {
                    return true
                }
                });
            //再进行分页筛选
            this.totalRowCount = this.listData.length;
            this.listData = JSON.parse(JSON.stringify(this.listData)).filter((item,index)=>{
                let pageFlag = index+1<=this.pageSize;
                return pageFlag

            });
        },
        //搜索
        searchGo(val){
            if(!JSON.parse(this.listDataBf)||!JSON.parse(this.listDataBf).length) return; // 容错
            this.listData = JSON.parse(this.listDataBf).filter(item=>{
                let flag = item.corporation.indexOf(val)>-1 || item.indChannelName.indexOf(val)>-1 || item.managerName.indexOf(val)>-1;
                let replaceReg = new RegExp(val, 'g');
                let replaceString = '<span class="search-text">' + val + '</span>';
                if(item.corporation.indexOf(val)>-1){
                    this.$set(item,'corporation',item.corporation.replace(replaceReg, replaceString))
                }
                if(item.indChannelName.indexOf(val)>-1){
                    this.$set(item,'indChannelName',item.indChannelName.replace(replaceReg, replaceString))
                }
                if(item.managerName.indexOf(val)>-1){
                    this.$set(item,'managerName',item.managerName.replace(replaceReg, replaceString))
                }
                return flag
            })
            this.totalRowCount = this.listData.length;
            this.listData = JSON.parse(JSON.stringify(this.listData)).filter((item,index)=>{
                let pageFlag = index+1<=this.pageSize;
                return pageFlag

            });
        },

第四步 逻辑写完了，自测功能可以实现了，作为一个21世纪的祖国花朵，咱接下来是不是要抽取下公共代码和优化下数据处理呢？

     //分页
        getPageList(){
            //前端分页
            //先筛选出筛选项的所有数据再进行分页筛选
            this.listData = JSON.parse(this.listDataBf).filter((item,index)=>{
                let statusFlag = this.channelListStatus==='全部'?true:item.channelEnabled===this.channelListStatus;
                //关键字搜索
                let searchFlag = item.corporation.indexOf(this.searchVal)>-1 || item.indChannelName.indexOf(this.searchVal)>-1 || item.managerName.indexOf(this.searchVal)>-1
                //关键字匹配标红
                this.searchActive(item);
                return   statusFlag && searchFlag

            });
            this.publicPage()
        },

        //下拉筛选 //搜索  两个方法改变都是同一个改变
        statusOrSearchGo(){
            if(!JSON.parse(this.listDataBf)||!JSON.parse(this.listDataBf).length) return; // 容错
            this.pageNo = 1;
            //先筛选出筛选项的所有数据
            this.getPageList()
            //再进行分页筛选
            this.publicPage()

        },
        //抽取公用
        publicPage(){
            //分页抽取
            this.totalRowCount = this.listData.length;
            this.listData = JSON.parse(JSON.stringify(this.listData)).filter((item,index)=>{
                let pageFlag = this.pageNo===1 ? index+1<=this.pageSize : index+1<=this.pageNo*this.pageSize&&index+1>(this.pageNo-1)*this.pageSize;   //index+1 下标开始是0 下标加1在页码范围
                return pageFlag

            });

        },
        searchActive(item){
            //关键字高亮抽取
            let replaceReg = new RegExp(this.searchVal, 'g');
            let replaceString = '<span class="search-text">' + this.searchVal + '</span>';
            if(item.corporation.indexOf(this.searchVal)>-1){
                this.$set(item,'corporation',item.corporation.replace(replaceReg, replaceString))
            }
            if(item.indChannelName.indexOf(this.searchVal)>-1){
                this.$set(item,'indChannelName',item.indChannelName.replace(replaceReg, replaceString))
            }
            if(item.managerName.indexOf(this.searchVal)>-1){
                this.$set(item,'managerName',item.managerName.replace(replaceReg, replaceString))
            }

        },

抽取完了是不是觉得简便了好多呢？
The Last 最后是不是要上点效果图呢
刚开始全部数据是这样的
在这里插入图片描述
筛选后

结语
以上是本人个人理解和看法喔，后面有发现bug再更新下，希望自己能坚持不断记录沉淀自己，提升能力，加油！！！！

badboy__biubiubiu

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
vue中结合element-ui的Pagination 分页组件写出后端给所有数据前端进行分页和有筛选条件的功能（前端数据分页）

vue中结合element-ui的Pagination 分页组件写出后端给所有数据前端进行分页和有筛选条件的功能（前端数据分页）前言昨天接到后端的一个获取接口，产品有分页，至今搞不懂为何后端竟然说出让我惊讶好久的话我只能回复一个问号，后面就是各种的讨论了，好吧，对于性能我的看法是在前端分页的话肯定要在前端各种操作数据，如果数据量复杂（几百条应该还好吧），那肯定会导致渲染慢从而耗费大量的内存，...
复制链接

扫一扫