问题解决:vue的下拉无线刷新InfiniteLoading组件,连续点击的时候,怎么能不查询出重置数据


我发现连续点击查询按钮的时候,往表格填充的数据会重复。 如果等加载完毕之后点击查询,往表格填充的数据是正常的, 怎样控制 连续点击查询的时候,往表格填充的数据是不重复的。 问题:连续点击查询按钮,会连续调用后端接口,往表格填充的数据就会重复。 mounted() { this.load(); }, methods: { //延迟0.6秒执行一次查询方法 onInfinite() { setTimeout(() => { this.myRisk(); }, 2000); }, // 按风险级别和风险查询当前登录人的风险 search() { var that = this that.currentPage = 1; that.riskLists = []; that.$refs.infiniteLoading.$emit("$InfiniteLoading:reset"); that.myRisk(); }, // 查询登录人的所有风险,每次查询10条 myRisk() { // debugger; var that = this; var param = { page: that.currentPage, fxjb: that.riskLevel, fx: that.riskName, }; console.log(param); var url = Vue.__ctx + "/aqsk/aqRiskIdentify/selectRiskByUserOrJob"; var post = Vue.baseService.post(url, param); post.then(function (data) { if (data.isOk === false) { that.$refs.infiniteLoading.$emit("$InfiniteLoading:complete"); return; } if (!data.rows.length) { that.$refs.infiniteLoading.$emit("$InfiniteLoading:complete"); return; } that.currentData = data.rows; that.currentPage = that.currentPage + 1; console.log(that.currentPage); that.riskLists = that.riskLists.concat(that.currentData); that.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded"); }); }, // 页面每次加载时,设置当前页为1,风险数据重置成空数组,设置infiniteLoading为重置 load() { this.currentPage = 1; this.riskLists = []; this.$refs.infiniteLoading.$emit("$InfiniteLoading:reset"); this.myRisk(); }, }, // 注册InfiniteLoading组件 components: { InfiniteLoading, }, 解决方式: 查询的时候,按钮禁止点击。

相关