el-select可新增输入,可选择

最近在做一个功能,客户提出既可以下拉选择名称,也可以自己输入名称。用的el-select自带属性实现,但是需要点击回车才可以实现输入,弄了挺久才想到通过ref属性获取输入内容,在@blur中进行赋值,很好的实现了可选择,可输入。

1,通过filterable筛选属性,来实现可输入的下拉框

 //filterable属性必须为true
                 <el-select
                      v-model="name"
                      allow-create
                      default-first-option
                      filterable
                      value-key="name"
                      @blur="nameblur()"
                      ref="nameSel"
                    >
                      <el-option
                        v-for="item in list"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>

2.失去焦点给输入框赋值

//可通过ref属性获取当前select选择器中的输入内容
nameblur(){
 this.name = this.$refs.tableName.selectedLabel
}

### 解决方案 在 VueElement UI 中,`el-select` 组件的多选模式下,默认情况下按下回车键会触发选项的选择或取消选中。如果需要关闭这种行为,可以通过监听 `keydown` 事件并阻止其默认行为来实现。 以下是具体的实现方式: #### 方法一:通过自定义指令拦截按键事件 可以在组件层面添加一个全局或局部指令,用于捕获键盘事件并阻止特定按键的行为。 ```javascript // 自定义指令,防止回车键触发默认行为 Vue.directive('stop-enter', { bind(el) { el.addEventListener('keydown', (event) => { if (event.key === 'Enter') { // 阻止回车键的默认行为 event.preventDefault(); } }); }, }); ``` 然后,在模板中应用该指令到 `el-select` 上: ```vue <template> <el-select v-stop-enter multiple v-model="selectedValues" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { data() { return { selectedValues: [], options: [ { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' }, ], }; }, }; </script> ``` 这种方法能够有效屏蔽回车键对 `el-select` 的影响[^1]。 --- #### 方法二:重写 `@keydown.native` 事件 另一种更灵活的方式是直接在 `el-select` 组件上绑定原生的 `keydown` 事件,并手动处理按键逻辑。 ```vue <template> <el-select @keydown.native="handleKeydown" multiple v-model="selectedValues" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { data() { return { selectedValues: [], options: [ { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' }, ], }; }, methods: { handleKeydown(event) { if (event.key === 'Enter') { // 拦截回车键 event.stopPropagation(); // 停止冒泡 event.preventDefault(); // 防止默认行为 } }, }, }; </script> ``` 这种方式更加直观,适合针对具体场景进行定制化开发[^2]。 --- #### 方法三:修改组件内部逻辑(不推荐) 虽然可以直接修改 `el-select` 的源码以禁用某些交互行为,但这通常不是一个好的实践,因为这会导致维护困难以及版本升级时可能丢失更改。因此,除非有特殊需求,一般建议采用前两种方法。 --- ### 关于 `el-select` 的回车事件处理机制 当用户在输入框中按下回车键时,Element UI 默认会尝试匹配当前输入的内容与可选项列表中的条目。如果没有找到完全匹配的结果,则可能会执行其他操作,比如取消已有的选中项。这是为了提供一种便捷的操作体验,但在某些业务场景下可能导致不符合预期的行为。此时,通过上述方法可以有效地控制这一行为[^3]。 --- ### 注意事项 - 如果项目中有多个类似的场景,可以考虑封装成通用工具函数或插件以便复用。 - 确保测试覆盖各种边界情况,例如快速连续按键、焦点切换等情形下的表现是否正常[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值