elemetnUI,autocomplete添加clear清除之后,输入后返回数据不渲染

这篇博客讨论了在使用 Element UI 的 Autocomplete 组件时遇到的问题,即添加清除按钮后,后端返回的数据无法正常渲染。作者提出通过设置 `activated` 属性为 `true` 的解决方案来修复这个问题。博客内容涉及到 Vue.js 开发、前端交互设计以及组件状态管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码:

<el-autocomplete prefix-icon="el-icon-search" style="width:100%;" v-model="searchText" 
        clearable
        ref="autocomplete"
        placeholder="请输入需要查找的关键词进行查找" 
        :fetch-suggestions="querySearch"  @keydown.enter.native='searchStart'
        :trigger-on-focus="false" @select="handleSelect" @input="loadAll"
        :disabled="sxFlag"
        @clear="blurForBug()"
      >
	  <template slot-scope="{item}">
          <div>{{item}}</div>
        </template>
</el-autocomplete>

//需求是在这个框内,加入清空删除小按钮操作,但是会出现点击后,关联后端返回数据渲染失效,
那么我们可以加一个清除事件

//清空
  blurForBug(){
    this.$refs.autocomplete.activated = true
  },

有问题请直接留言

### 如何清除 `el-autocomplete` 组件中的上一次输入建议 在使用 Element UI 的 `el-autocomplete` 组件时,如果希望清除之前的输入建议,可以通过重新设置其绑定的数据模型或者调用特定方法来实现。以下是具体的操作方式: #### 方法一:重置绑定的 `v-model` 通过将 `v-model` 所绑定的变量清空,可以达到清除当前输入框内容的效果。这会间接影响到组件内部的状态管理。 ```javascript this.value = ''; // 假设 value 是绑定到 el-autocomplete 的 v-model 属性上的变量名 ``` 此操作不仅能够清空用户的输入内容,还可以让组件重新加载默认状态[^1]。 --- #### 方法二:更新 `fetch-suggestions` 数据源 当用户交互完成后(例如选择了某个选项),可以通过修改传递给 `fetch-suggestions` 的回调函数内的数据源来刷新下拉列表的内容。假设原始数据存储在一个数组中,则可以直接将其替换为空数组或其他新数据集。 ```javascript // 定义一个新的空数组作为新的建议数据源 const newData = []; this.querySearch('', (data) => { data(newData); // 将最新的建议数据传回至组件 }); ``` 上述代码片段展示了如何动态调整提供给 `el-autocomplete` 的建议项集合[^2]。 --- #### 方法三:手动销毁并重建实例 对于某些复杂场景下的彻底清理需求,可以选择完全卸载再初始化该控件的方式完成目标。不过这种方式较为激进,在实际开发过程中应谨慎采用。 ```html <template> <div v-if="showAutocomplete"> <!-- 自动补全组件 --> <el-autocomplete ... /> </div> </template> <script> export default { data() { return { showAutocomplete: true, }; }, methods: { resetComponent() { this.showAutocomplete = false; this.$nextTick(() => { this.showAutocomplete = true; // 在下一帧恢复显示以强制重新渲染 }); } } }; </script> ``` 这种方法适用于需要频繁切换配置参数的情况[^3]。 --- #### 注意事项 - 如果仅需简单地隐藏已有的提示条目而无需真正移除它们的话,也可以考虑监听外部事件比如失去焦点(`blur`)之后执行额外逻辑。 - 对于特殊定制化的需求如只允许数字类型的输入验证规则,记得结合正则表达式或者其他过滤机制加以约束[^4]。 - 阻止默认行为可能会影响用户体验,请确保此类改动不会带来负面影响[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值