Maximum recursive updates exceeded in component <ElSelect>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
最近修改老项目时,elementUI-Plus的select框由于数据太多,导致出现了上述问题
解决
<el-form-item label="测试">
<el-select
v-model="testValue"
value-key="id"
filterable
placeholder="测试"
@change="onChange"
:filter-method="handleFilter"
@visible-change="onVisibleChange"
@beforeinput="onBeforeInput"
>
<el-option
v-for="item in list"
:key="item.id"
:label="item.name"
:value="item"
/>
</el-select>
</el-form-item>
...
method: {
onVisibleChange() {
setTimeout(() => {
this.trainInfo = this.trainInfoCopy
}, 500)
},
onBeforeInput(e) {
this.oldVal = e.target.value
},
handleFilter(val){
if (val.length < this.oldVal.length){
this.trainInfo = this.trainInfoCopy
}
this.trainInfo = this.trainInfo.filter(item => {
return item.trainNumber.includes(val.toUpperCase())
})
},
onChange(val) {
this.searchForm.id = val.id;
this.searchForm.name = val.name;
},
}
'''