ElementUI-Plus select组件搜索功能出现异常

程序小白加入

于 2024-08-30 15:10:09 发布

阅读量218

点赞数 1

文章标签：前端 javascript 开发语言 elementui vue.js

本文链接：https://blog.csdn.net/weixin_45821056/article/details/141718278

版权

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;
    },

}
'''