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

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
                },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

后台部分
接入进来参数可以通过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());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4.参考资料

官方相关文档
element ui table+分页 筛选全部数据-demo