Jeecg-boot中的popup弹窗增加模糊查询

会握爪的小金毛

已于 2022-04-07 15:22:52 修改

阅读量3.3k

点赞数 6

分类专栏： Jeecg-boot 文章标签： popup 模糊查询 jeecg-boot

于 2022-04-07 15:20:24 首次发布

本文链接：https://blog.csdn.net/Sdnu08gis/article/details/124016999

版权

Jeecg-boot 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Jeecg-boot框架中如何实现模糊查询，主要涉及两个关键方法的改写：JPopupOnlReport.vue组件中的searchByquery方法和handleChangeInTable方法。在查询时，通过在查询条件前添加通配符'*'进行模糊匹配，查询完成后移除通配符，确保正确显示结果。同时，handleChangeInTable方法的改写解决了分页查询时模糊查询的问题。

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

总体思路：在加载数据时，将查询条件前加上通配符'*'，用来进行模糊查询，查询完成后再将 '*'去掉。（Jeecg-boot框架中的查询过滤器支持在查询条件中添加通配符 * 进行模糊查询）

查询过滤器用法

1、找到JPopupOnlReport.vue这个文件，改写searchByquery方法

searchByquery() {
	let i;
	for (i = 0; i < this.queryInfo.length; i++) {
		this.queryParam[this.queryInfo[i].field] = '*' + this.queryParam[this.queryInfo[i].field] + '*'
	}
	this.loadData(1);
	for (i = 0; i < this.queryInfo.length; i++) {
		this.queryParam[this.queryInfo[i].field] = this.queryParam[this.queryInfo[i].field].replace(/\*/g, '')
	}
},

2、改写handleChangeInTable方法，在this.loadData();行前后添加以下代码。这部分是为了解决模糊查询的结果出现分页时，分页查询无法使用模糊查询的情况。

handleChangeInTable(pagination, filters, sorter) {
	//分页、排序、筛选变化时触发
	if (Object.keys(sorter).length > 0) {
		this.iSorter = {
			column: sorter.field,
			order: 'ascend' === sorter.order ? 'asc' : 'desc'
		}
		// 排序字段受控
		this.table.columns.forEach(col => {
			if (col.dataIndex === sorter.field) {
				this.$set(col, 'sortOrder', sorter.order)
			} else {
				this.$set(col, 'sortOrder', false)
			}
		})
	}
	this.table.pagination = pagination;
	let i;
	for (i = 0; i < this.queryInfo.length; i++) {
		this.queryParam[this.queryInfo[i].field] = '*' + this.queryParam[this.queryInfo[i].field] + '*'
	}
	this.loadData();
	for (i = 0; i < this.queryInfo.length; i++) {
		this.queryParam[this.queryInfo[i].field] = this.queryParam[this.queryInfo[i].field].replace(/\*/g, '')
	}
},