1、功能演示
2、具体操作
输入搜索值
点击搜索
刷新界面之后
3、实现代码
首先看一下后端接口
这是我获取列表数据的代码,新增带加号这几行
private getTable(page: number, rows: number): void { let params: any = { page, rows }; + if(this.$route.query.unit) { + params.unit = this.$route.query.unit || ''; + }; Object.keys(this.form).forEach((k: string) => (this.form[k] ? (params[k] = this.form[k]) : '')); this.setLoading(true); deployList(params).then((res: any) => { const { code, data } = res; if (code === 1) { this.pageTotal = data.cnt || 0; this.tableData = data.data || []; this.tableData.forEach((v: any) => { v.commit_id = v.commit_id.slice(0,8); }); }; }); }123456789101112131415161718
搜索列表代码
private searchTable(): void { this.currenPage = 1; this.pageSize = 8; if(this.form.unit) { if(this.$route.query.unit) { if(this.form.unit == this.$route.query.unit) { this.getTable(this.currenPage, this.pageSize); return; } } this.$router.replace('/pcd/deploy' + '?unit=' + this.form.unit) } else { if(!this.form.unit && !this.$route.query.unit) { this.getTable(this.currenPage, this.pageSize); return; } this.$router.replace('/pcd/deploy'); } this.getTable(this.currenPage, this.pageSize); }1234567891011121314151617181920
4、实现原理
因为两个页面实现原理都是一样的,所以这里直接说想法。通过this.$route
中的query
来存储unit
的值(后端接口要实现搜索功能),在搜索的时候把搜索框内的值赋值到this.$route.query.unit
上,刷新界面是,判断this.$route.query.unit
是否存在,如果存在直接按照unit
的值进行模糊搜索,这里要注意如果路径上也就是this.$route.query.unit
的值存在并且你搜索框输入的值与其相同,会导致路径重复报错Navigating to current location
,因此这时要在点击搜索的时候进一步判断。
测试的是时候还遇到一些bug,比如搜索的值为空的时候,页面不跳转;搜索值相同的时候,页面显示全部数据;搜索值为空,点击第一次搜索,页面数据不变,再点击一次才出现全部数据等等,可以看一下上面最后改的代码逻辑,本人测现在是没有任何的bug了。
作者:SmallTeddy
链接:https://blog.csdn.net/SmallTeddy/article/details/109361791
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。