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

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

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

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());

4.参考资料

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

<el-table ref="singleTable" :data="configs" border class="wraper-table" element-loading-text="Loading" fit highlight-current-row size="mini" style="margin: 0px 0 20px 0"> <el-table-column :label="$t('table.select')" width="50" align="center"> <template slot-scope="scope"> <el-radio v-model="radio" :label="scope.row.id" @change="chooseOne(scope.row)">{{ '' }}</el-radio> </template> </el-table-column> <el-table-column :label="$t('table.id')" align="center" width="50"> <template v-slot="scope"> {{ initTableIndex('page', scope.$index) }} </template> </el-table-column> <el-table-column :label="$t('i18nView.pdCode')" align="center" prop="pdCode"></el-table-column> <el-table-column :label="$t('i18nView.pdName')" align="center" prop="pdName"></el-table-column> <el-table-column :label="$t('customComponents.pdEdition')" align="center" prop="pdEdition"></el-table-column> <el-table-column :label="$t('pdtempPdInfoView.pdApplDate')" align="center" prop="pdApplDate" sortable></el-table-column> <el-table-column :label="$t('pdtempPdInfoView.updateTime')" align="center" prop="changeDate" sortable> <template v-slot="scope"><span v-if="scope.row.defType!=1">{{ scope.row.changeDate }}</span></template> </el-table-column> <el-table-column :label="$t('pdtempPdInfoView.definitionType')" align="center" prop="defType"> <template v-slot="scope">{{ scope.row.defType | filterDefType }}</template> </el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList1" :label="$t('pdtempPdInfoView.attributeDefinitionState')" align="center" prop="attrDefState"></el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList2" :label="$t('pdtempPdInfoView.structureDefinitionState')" align="center" prop="structDefState"></el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList3" :label="$t('pdtempPdInfoView.currentPriceDefinitionState')" align="center" prop="priceDefState"></el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList4" :label="$t('pdtempPdInfoView.superviseDefinitionState')" align="center" prop="superviseDefState"></el-table-column> </el-table> <!-- 分页 --> <cus-pagination ref="page" v-model="configs" :pageSize="10" :params="params" url="/pdtemp-pd-info/list"/>以上代码如何实现数据渲染
07-22
<template> <div class="bim-card-emer-plan-management"> <el-card :body-style="bodyStyle10"> <el-container> <el-header height="45px"> <el-row :gutter="24" style="width: 100%; margin-bottom: 0;"> <el-col :span="3" :offset="11" > <el-cascader v-model="selectBridge" :options="bridgeOptions" placeholder="请选择桥梁" :props="cascaderProps" @change="handleBridgeChange" clearable ></el-cascader> </el-col> <el-col :span="2.5" :offset="0" > <el-select v-model="selectAccident" placeholder="请选择预案类型" @change="handleChange" > <el-option v-for="item in emergencyEventTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-col> <el-col :span="3" :offset="0" > <el-input style="width:100%" placeholder="请输入预案名称/描述" v-model="Accidentinput" clearable ></el-input> </el-col> <el-col :span="1.5" :offset="0" > <el-button type="primary" icon="el-icon-search"> 搜索 </el-button> </el-col> <el-col :span="1" :offset="0"> <el-button type="success" icon="el-icon-circle-plus" @click="createNewid" > 新建 </el-button> </el-col> </el-row></el-header> <el-main class="layout-container"> <el-table :data="tableData" style="width: 100%" height="100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }" class="full-height-table"> <el-table-column prop="ceshibridgeName" label="桥梁名称" width="150"></el-table-column> <el-table-column :prop="ceshiNumber" label="桥梁编号" width="200"></el-table-column> <el-table-column :prop="ceshidanwei" label="测试单位" width="250"></el-table-column> <el-table-column :prop="emergencyName" label="应急预案名称" width="250"></el-table-column> <el-table-column :prop="emergencyType" label="应急预案类型" width="300"></el-table-column> <el-table-column :prop="emergencyDescription" label="应急预案说明" width="300"></el-table-column> <el-table-column :prop="emergencyNote" label="应急预案备注" width="300"></el-table-column> <el-table-column fixed="right" :data="ceshioperation" label="操作" width="360"> <template :slot-scope="scpoe"> <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)"> </el-button> <el-button type="success" icon="el-icon-view" size="mini" @click="handleView(scope.view)"> </el-button> <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)"> </el-button> </template> </el-table-column> </el-table> </el-main> <el-footer height="60px"> <el-pagination ></el-pagination> </el-footer> </el-container> </el-card> </div> </template> <script> // 混入 import autoHeight from "@/mixin/autoHeight"; import { mapCfg, dateTimeFormat } from "@/utils"; import ElementUI from "element-ui"; import request from '@/utils/request' // 提示信息 import { CONFIRM, TIP } from "@/optionsCfg/Message.js"; import { DIALOG_CLOSED_TYPE as Dialog } from "@/optionsCfg/Constants"; import { getBridgeListV2 } from "../../api/bridgeSelection"; export default { name: "emergencyPlanManagementTable", data() { return { selectAccident: '', emergencyEventTypeOptions: [], selectBridge: [], bridgeOptions: [], cascaderProps: { value: 'id', label: 'name', children: 'children', checkStrictly: true, emitPath: false }, tableData: [], // 实际数据 allBridges: [], bodyStyle10: { padding: '10px' }, Accidentinput: '', ceshiNumber: 'bridgeCode', ceshidanwei: 'maintainCompany', emergencyName: 'planName', emergencyType: 'planType', emergencyDescription: 'description', emergencyNote: 'remark', ceshioperation: 'operation' }; }, async created() { await this.loadBridges(); await this.getEmergencyEventTypeOptins(); await this.fetchEmergencyPlans(); }, filters: { }, watch: { }, mixins: [autoHeight], mounted() { this.$nextTick((_) => { this.alarmTableHeight = document.querySelector(".bim-card-emer-plan-management").offsetHeight - document.querySelector(".header-height-emer-plan-management").offsetHeight - 52 - 10; }); this.loadBridges(); }, methods: { async getEmergencyEventTypeOptins(){ try{ //返回的是数组 const dictList = await mapCfg("EmergencyEventType")(); console.log('预期类型字典数据',dictList); this.emergencyEventTypeOptions = dictList.map(item =>({ value:item.key, label:item.value })); console.log('转换后的预案类型选项',this.emergencyEventTypeOptions); }catch(error){ console.error('获取失败',error); } }, async loadBridges() { try { console.log('开始加载桥梁数据...'); const res = await getBridgeListV2({ isApproved: true }); console.log('API响应:', res); if (res?.data) { const options = []; Object.entries(res.data).forEach(([companyName, bridgeList], index) => { console.log(`处理单位[${index}]:`, companyName); const companyNode = { id: `company_${index}_${companyName}`, name: companyName, children: [] }; bridgeList.forEach((bridge, bIndex) => { console.log(` 添加桥梁[${bIndex}]:`, bridge.bridgeName); companyNode.children.push({ id: bridge.id, name: bridge.bridgeName || '未命名桥梁', bridgeData: bridge }); }); options.push(companyNode); }); this.bridgeOptions = options; console.log('最终选项:', this.bridgeOptions); } } catch (error) { console.error('加载失败:', error); } }, handleBridgeChange(bridgeId) { this.selectedBridgeId = bridgeId; this.fetchEmergencyPlans(); // 根据桥梁ID获取应急预案 }, handleChange(value) { console.log('预案类型选择:', value); this.fetchEmergencyPlans(); }, createNewid() { console.log('新建预案'); // 这里添加新建逻辑 }, handleBridgeChange(value) { console.log('桥梁选择:', value); this.fetchEmergencyPlans(); }, async fetchEmergencyPlans() { try { // 这里添加获取应急预案数据的逻辑 const params = { bridgeId: this.selectBridge, planType: this.selectAccident }; const res = await request.get('/api/emergency-plans', { params }); this.tableData = res.data; this.ceshiData = this.tableData; // 同步到表格数据 } catch (error) { console.error('获取应急预案失败:', error); } }, // 其他操作方法 handleEdit(row) { console.log('编辑:', row); }, handleView(row) { console.log('查看:', row); }, handleDelete(row) { console.log('删除:', row); }, }, async created() { await this.loadBridges(); await this.getEmergencyEventTypeOptins(); await this.fetchEmergencyPlans(); // 初始化加载数据 } }; </script> <style scoped> .layout-container{ height: 70vh; } .full-height-table{ flex:1; min-height: 0; } .el-header { border-bottom: 1px solid #dad8d8; /* 下边框 */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 阴影增强效果 */ } .el-main{ margin-top: 5px; padding: 0; overflow: hidden; flex-direction: column; } .el-row { margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .el-col { border-radius: 4px; } .p20 { padding: 20px; } .p10 { padding: 10px; } .mb10 { margin-bottom: 10px; } .line1 { border-bottom: 1px solid #ebeef5; } h2.title { font-size: 16px; padding-left: 20px; padding-right: 20px; } </style>需要凑后端列表数据接口: api/emergency-plan-maint-controller文件 getEmergencyPlanPageList 传入参 pageSize: , // 请求数量/页 pageNo: , // 页码 bridgeCode: "", // 桥梁编码 planType: "", // 应急预案类型 searchKey: "", // 测点编号/测点名称/测点位置 我要怎么给我的这个代码传参
最新发布
07-22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值