google网页版入口,seo索引擎优化,杭州网站推广公司,网站销售源码偶然遇到一个问题#xff0c;在 ElSelect 组件中设置 filterable 属性后#xff0c;监测不到复制粘贴的内容#xff0c;也就意味着不能调用接口#xff0c;下拉框内容为空。
简要代码如下#xff1a;
ElSelectstylewidth: 256pxmultiplev-model{siteIdL…偶然遇到一个问题在 ElSelect 组件中设置 filterable 属性后监测不到复制粘贴的内容也就意味着不能调用接口下拉框内容为空。
简要代码如下
ElSelectstylewidth: 256pxmultiplev-model{siteIdList}clearablefilterableremoteremoteMethod{getSiteList}placeholder请输入门店名称{siteList.value.map((item) (ElOption label{item.siteName} value{item.siteId} /))}
/ElSelect
对此进行分析。
1. 直观区别
在 ElSelect 组件中onInput 和 onChange 都是用于监听用户选择内容的事件区别在于
1、onInput 事件
触发时机onInput 事件在用户每次选择新选项时都会立即触发即每当输入值发生变化无论是添加or移除都会触发这个事件。
适用场景通常用于实时响应用户输入如动态更新页面数据、过滤、自动填充等。其触发频率较高更适合于即时性要求较高的场景。
2、onChange 事件
触发时机onChange 事件仅在用户选择内容发生最终变化并确认时触发。例如在用户点击选项列表中的某一项完成选择后onChange 才会触发。重复选择同一个选项不会触发 onChange。
适用场景更适合在选择操作完成后再进行的逻辑处理例如提交表单、更新数据等。因为它只在确认选择后触发频率较低适合用于非即时响应的场景。
2. 事件挂载
在 ElSelect 组件中onInput 和 onChange 事件的挂载有明显的不同这关系到它们在 Vue 中的实现和具体作用。
1、onInput 事件
挂载位置onInput 事件实际上是与 v-model 绑定的默认事件。在 Vue 中v-model 会自动绑定组件的 input 事件来更新数据因此当 ElSelect 的选择值发生变化时它会触发 onInput 事件将新值传递给 v-model 绑定的数据。这点需要额外注意下 el-select v-modelselectedValue inputhandleInputel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/
/el-select
当 selectedValue 更新时input 会自动触发实时同步数据。
2、onChange 事件
挂载位置onChange 是 ElSelect 自带的事件监听器与 v-model 没有直接关系。它可以单独挂载在组件实例上用于检测最终选择的变化。这点需要额外注意下 el-select v-modelselectedValue changehandleChangeel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/
/el-select
当用户的选择发生最终变化后change 会触发 handleChange 方法而不会在每次切换选项时触发。
总结 3. 解决方法
针对上述分析可以在 ElSelect 组件上使用 onInput 事件监听内容的改变。
ElSelectref{storeRef}stylewidth: 256pxfilterableremoteremoteMethod{getSiteList}onInput{(e) { handleInput(e?.data || ); }}multipleclearablev-model{siteIdList}placeholder请输入门店名称{siteList.value?.map((item) (ElOption label{item.siteName} value{item.siteId} /))}
/ElSelect
然后在 handleInput 事件上调用 storeRef 的 remoteMethod 事件进一步处理由此成功解决。
const handleInput debounce((query, type) {storeRef.value.remoteMethod(query);
}, 300);
