el-table-column :filters 多条件后台筛选全部数据分页处理

最新推荐文章于 2024-05-13 11:52:57 发布

原创最新推荐文章于 2024-05-13 11:52:57 发布 · 4.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #java

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用 Element UI 的表格组件实现分页时筛选全部数据而非仅当前页数据的功能。通过修改前端代码和后端处理逻辑，使得筛选操作能有效应用于整个数据集。涉及前端 Vue.js 和后端数据处理技巧。

1.问题描述

最终效果如下将排序字段传入后台进行处理
在这里插入图片描述
需要通过筛选条件不是排序筛选全部后台数据而不是当前页数据
查找相关资料

2.解决过程

1.首先查找相关官方文档
在这里插入图片描述
发现是筛选当前页这样只能前端进行分页及筛选才可以实现功能如果数据量大的情况下很麻烦

2.查找相关博客资料
主要参考参考资料2 博客链接 element ui table+分页筛选全部数据-demo

3.最终代码

vue页面中放上部分关键代码有些地方需要自行进行修改

<el-table border
                              ref="multipleTable"
                              :data="gameList"
                              :row-class-name="gameRowTableClass"
                              stripe
                              tooltip-effect="dark"
                              style="width: 100%" 
                               @filter-change="filterTagTable"
                              > 
                        <el-table-column
                                label="状态"
                                align="center"
                                :filters="[{ text: '已选', value: 1  }, { text: '未选', value: 0 }]"
                                :filter-multiple="false"
                                prop="id"
                                :column-key=" 'statusFlag' "
                                show-overflow-tooltip
                                >
                            <template slot-scope="scope" >
                                <el-tag type="success" v-if=" selectGameIds.has(scope.row.id)">已选中</el-tag>
                                <el-tag type="info" v-else>未选中</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="squareIcon"
                                label="大图标"
                                align="center"
                                :filters="[{ text: '有', value: 1  }, { text: '无', value: 0 }]"
                                :filter-multiple="false"
                                :column-key=" 'squareFlag' "
                                >
                            <template slot-scope="scope" >
                                <el-tag type="success" v-if="scope.row.squareIcon && scope.row.squareIcon !=''">有</el-tag>
                                <el-tag type="info" v-else>无</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="bannerIcon"
                                :column-key=" 'bannerFlag' "
                                label="banner"
                                align="center"
                                :filters="[{ text: '有', value: 1 }, { text: '无', value: 0 }]"
                                :filter-multiple="false"
                                >
                            <template slot-scope="scope" >
                                <el-tag type="success" v-if="scope.row.bannerIcon && scope.row.bannerIcon !=''">有</el-tag>
                                <el-tag type="info" v-else>无</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="microVideo"
                                :column-key=" 'videoFlag' "
                                label="视频"
                                align="center"
                                :filters="[{ text: '有', value: 1 }, { text: '无', value: 0 }]"
                                :filter-multiple="false"
                                >
                            <template slot-scope="scope" >
                                <el-tag type="success" v-if="scope.row.microVideo && scope.row.microVideo !=''">有</el-tag>
                                <el-tag type="info" v-else>无</el-tag>
                            </template>
                        </el-table-column>
///////////////-----------------------------方法部分
filterTagTable(filters){
            // console.log("aaa:",filters,"2222")
            if(filters.statusFlag ){
              // console.log("设置statusFlag")
              //标志位
              this.queryGameSelector.statusFlag = filters.statusFlag[0]
              //设置渠道已选游戏id   这里把set展开成array
              this.queryGameSelector.selectAllGameIds =  [...this.selectGameIds];
            }else{
              // console.log("清空statusFlag")
              this.queryGameSelector.statusFlag = -1
              this.queryGameSelector.selectAllGameIds = [];
            }
            if(filters.squareFlag){
              //设置大图标标志位
              this.queryGameSelector.squareFlag = filters.squareFlag[0]
            }else{
              this.queryGameSelector.squareFlag =-1
            }
            if(filters.bannerFlag){
              //设置banner 标志位
              this.queryGameSelector.bannerFlag = filters.bannerFlag[0]
            }else{
              this.queryGameSelector.bannerFlag = -1
            }
            if(filters.videoFlag){
              //设置videoFlag
              this.queryGameSelector.videoFlag = filters.videoFlag[0]
            }else{
              this.queryGameSelector.videoFlag = -1
            }
            this.gameSelectorTemp() // 筛选所选项下的所有数据，需要调用后端接口
          },


//-------------------------------变量定义
                this.queryGameSelector={
                  "statusFlag" : -1 ,
                  "selectAllGameIds" : [],
                  "squareFlag" : -1,
                  "bannerFlag" : -1,
                  "videoFlag" : -1
                },

后台部分
接入进来参数可以通过sql语句进行查询
我这里业务比较麻烦就没采用这个
是通过stream流处理进行filter过滤的这里就放一些代码如果有好的建议欢迎交流

 List<GameSelectorSample> filterLists = gameSelectorSamples.stream().filter(gameSelectorSample -> {
            //判断筛选条件
            //1.判断是否为板块已选中游戏
            boolean judge1 = true;
            if (Objects.nonNull(search.getStatusFlag())) {
                if (!CollectionUtils.isEmpty(search.getSelectAllGameIds())) {
                    if (search.getStatusFlag() == 0) {
                        //这里 set非空 如果status=0 需要筛选不在set中的数据
                        judge1 = !search.getSelectAllGameIds().contains(gameSelectorSample.getId());
                    } else if (search.getStatusFlag() == 1) {
                        //如果status==1 需要筛选在set中的数据
                        judge1 = search.getSelectAllGameIds().contains(gameSelectorSample.getId());
                    }
                }
            }
            //2.判断是否有大图标 1是 0否
            boolean judge2 = true;
            if (Objects.nonNull(search.getSquareFlag())) {
                if (search.getSquareFlag() == 0) {
                    // 如果status=0 需要筛选 square为null的数据
                    judge2 = Strings.isBlank(gameSelectorSample.getSquareIcon());
                } else if (search.getSquareFlag() == 1) {
                    //如果status==1 需要筛选 square为非空的数据
                    judge2 = Strings.isNotBlank(gameSelectorSample.getSquareIcon());
                }
            }
            
            return judge1 && judge2 
        }).collect(Collectors.toList());