联动tab组件做一个查询功能,功能代码设计哪里出问题?-灵析社区

777七月

组件标签: data: // 输入框内容 input: '', // 请求到的数据 allData: [], // tabpane绑定的label tabList: [], timeId: null 查询: search (value) { const title = JSON.parse(JSON.stringify(this.tabList)) const data = JSON.parse(JSON.stringify(this.allData)) // console.log('我点击了') if (value === '') this.$message.error('请输入有效值!') if (value) { // console.log('输入值---', value) const tab = title.filter(item => { // console.log('遍历的title-----', item) if (item.sn === value) return item // console.log('匹配值----', item) return item }) // console.log(tab) this.tabList = tab for (let i = 0; i { // console.log('data----', item) if (tab[i] === item.title) return item // console.log('匹配到的data-----', item) return item }) this.allData = datanew // console.log(this.allData) } } this.getAllData() } 打印输出:匹配到了之后,又去匹配其他非输入值 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/7dc5e80f6fb4671c459ab868d1fe69d8.png)

阅读量:317

点赞量:9

问AI
你每次循环都重新设置 allData,这会让之前的匹配结果被覆盖。 search(value) { if (value === '') { this.$message.error('请输入有效值!'); return; } const matchingTabs = this.tabList.filter(item => item.sn === value); const matchingData = this.allData.filter(item => { return matchingTabs.some(tab => tab.station === item.title); }); this.tabList = matchingTabs; this.allData = matchingData; this.getAllData(); }