ElementUI之table表格表头添加筛选条件

浅浅的花香味﹌ 2023-06-19 02:13 20阅读 0赞

*  代码：
    
        <template>
        	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0!important;">
        
        		<el-tabs v-model="tabIndex">
        			<el-tab-pane :label="tab.name" :key="tabI" v-for="(tab,tabI) in tabbars">
        				<el-table border class="mt-3" :data="opinion" style="width: 100%" @filter-change="change" @expand-change="showDetail">
        					<el-table-column type="expand">
        						<template slot-scope="props">
        							<el-form>
        								<el-row :gutter="10" type="flex" justify="space-around">
        									<el-col :span="6" v-for="(item,index) in files" :key="index">
        										
        										<el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="files">
        										</el-image>
        									</el-col>
        								</el-row>
        							</el-form>
        						</template>
        					</el-table-column>
        					<el-table-column prop="content" :show-overflow-tooltip="true" align="center" label="内容">
        					</el-table-column>
        					<el-table-column align="center" prop="contact" label="联系方式">
        					</el-table-column>
        					<el-table-column align="center" prop="score" label="评分">
        					</el-table-column>
        					<el-table-column align="center" prop="time" label="提交时间">
        					</el-table-column>
        					<el-table-column align="center" prop="state" label="处理状态" column-key="stat" :filters="deal" :filter-multiple="false">
        					</el-table-column>
        					<el-table-column align="center" prop="state" label="处理状态" column-key="state" :filters="deal" :filter-multiple="false">
        					</el-table-column>
        					<el-table-column align="center" label="操作" width="150">
        						<template slot-scope="scope">
        							<el-button type="danger" size="mini" plain @click="checkItem(scope.row)">已处理</el-button>
        						</template>
        					</el-table-column>
        				</el-table>
        				<div style="height: 60px;"></div>
        				<el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 100;">
        					<div style="flex: 1;text-align: right;" class="px-2">
        						<el-pagination :current-page="tableData[tab.id].page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        						 :page-sizes="[10, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="tableData[tab.id].total">
        						</el-pagination>
        					</div>
        				</el-footer>
        			</el-tab-pane>
        		</el-tabs>
        	</div>
        </template>
        
        <script>
        	var _this;
        	export default { 
        		components: { },
        		data() { 
        			return { 
        				tabIndex: 0,
        				tabbars: [{ 
        					id: 0,
        					name: "待处理"
        				}],
        				deal: [{ 
        					text: '待处理',
        					value: 'W'
        				}, { 
        					text: '处理完成',
        					value: 'A'
        				}, { 
        					text: '废弃',
        					value: 'X'
        				}],
        				// 表格数据
        				tableData: [],
        				// 意见反馈
        				opinion: [],
        				// 文件
        				files: [],
        				// 默认处理状态
        				state:'W'
        			}
        		},
        		created() { 
        			// 不懂，前端写的，好像是解决不主动渲染的问题
        			_this = this;
        			for (let li of _this.tabbars) { 
        				var data = li;
        				data.page = 1;
        				data.size = 10;
        				this.tableData.push(data);
        			}
        			this.__getData();
        		},
        		mounted() { 
        			
        		},
        		methods: { 
        			// 数目变化
        			handleSizeChange(val) { 
        				_this.tableData[0].size = val;
        				_this.__getData();
        			},
        			// 页码变化
        			handleCurrentChange(val) { 
        				_this.tableData[0].page = val;
        				_this.__getData();
        			},
        			// 获取数据
        			__getData() { 
        				var data = { 
        					page: _this.tableData[0].page,
        					size: _this.tableData[0].size,
        					state: _this.state
        				}
        				// 调用接口,方法已封装
        				this.doPost('opinion/filter', data, res => { 
        					var list = res.list;
        					_this.opinion = list;
        					_this.tableData[0].total = res.total;
        				});
        			},
        			// table表头筛选条件触发事件
        			change(filters){ 
        				if(Object.keys(filters)[0] == "state"){ 
        					// 判断当前是哪一列搜索条件发生变化
        					// 处理状态行
        					console.log(filters);
        					// 下面的state是上面比较的值(最傻逼的地方)
        					_this.state = filters.state[0];
        					_this.__getData();
        				}else if(Object.keys(filters)[0] == "stat"){ 
        					// 其他行,作比较
        					console.log(Object.keys(filters)[0])
        					console.log(filters.state[0]);
        				}else{ 
        					console.log("不在统计的列发生筛选条件变化")
        				}
        			},
        			// 表格单列expand触发事件,展示文件信息
        			showDetail(item) { 
        				var fs = item.files.split(',');
        				var urls = [];
        				for (let li in fs) { 
        					urls.push(_this.$conf.serverFileHost + fs[li]);
        				}
        				_this.files = urls;
        			},
        			// 操作按钮触发事件
        			checkItem(item) { 
        				this.doPost('opinion/deal', { 
        					id: item.id
        				}, res => { 
        					_this.__getData();
        				});
        			},
        		},
        	}
        </script>
    
    描述一下我遇到的问题，我想要在表格的表头中添加筛选条件，如图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmdsZV9jb25n_size_16_color_FFFFFF_t_70]  
    我的目的是想要在点击了筛选之后我自行调用后端接口重新加载数据！！！即在filter-method对应的方法中调用后端接口，然而这玩意傻缺到什么程度？这个方法只能对已经查询出来的数据进行筛选？？后端作了分页查询，你让我一次查出来几百条你再给我筛选一次？那我还要分页做什么？我有几千万数据你也要我一次查出来？？？？好吧看官方文档既然明确了不能主动调用后端就另图它法吧（我尝试调用了后端接口，可是这个东西竟然循环调用你敢信！！如果不是后端做了IP+接口调用频次限制，指不定要查多少次数据库），继续翻文档，找到了一个filter-change方法，介绍如下：
    
        当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 
        columnKey，对应的 value 为用户选择的筛选条件的数组
    
    好的，问题来了，如果是单列存在筛选条件还好说，多列怎么办？按照官方解释应该是无论多少列最终触发的都是这一个方法，毕竟这个方法在table上而不是column上，于是就有了最开始的代码：
    
        change(filters){ 
        	if(Object.keys(filters)[0] == "state"){ 
        		// 判断当前是哪一列搜索条件发生变化
        		// 处理状态行
        		console.log(filters);
        		// 下面的state是上面比较的值(最傻逼的地方)
        		_this.state = filters.state[0];
        		_this.__getData();
        	}else if(Object.keys(filters)[0] == "stat"){ 
        		// 其他行,作比较
        		console.log(Object.keys(filters)[0])
        		console.log(filters.stat[0]);
        	}else{ 
        		console.log("不在统计的列发生筛选条件变化")
        	}
        },
    
    先看一下点击筛选之后触发方法的参数是什么：  
    ![在这里插入图片描述][20191203190135790.jpg]  
    处理，想办法拿到想要的`W`值，先判断column-key是不是目标列，于是一顿比较。。匹配到了之后再获取值，我的数据是返回长度为1，可能是因为我禁止了多选条件（理论上而言无论多选单选都触发这个方法，所以个人感觉这个方法不太好），注意`filters.state[0]`这里的state是当前if条件匹配的字符串，因为上图打印的参数名是字符串名，即column-key的值。  
    终于拿到我想要的值了，再去调用后端方法发现页面刷新数据也变化了同时不会出现循环调用的情况，算是解决了ElementUI这个表头里面带筛选条件的问题。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmdsZV9jb25n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203184509342.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmdsZV9jb25n,size_16,color_FFFFFF,t_70
[20191203190135790.jpg]: https://img-blog.csdnimg.cn/20191203190135790.jpg