**

摘要

**
select组件如果想手动创建一个条目,需要设置allow-create为true,
输入完成后还需要点击一下新建的条目,才能更新显示的内容,不然会还原为初始值。个人认为不太人性化,在失去焦点时自动创建才是最好的选择。
**

实现思路:

**
利用Vue的自定义指令监听select组件内部的input,等到input失去焦点的时候,把这个值赋给select组件绑定的变量。

部分代码

html部分片段【el-select-input==elSelectInput】

<el-select v-el-select-input

js部分

export default {
	directives: {
		elSelectInput: {
			bind: function(el) {
				if (el.tagName.toLowerCase() !== 'input') {
					el = el.getElementsByTagName('input')[0];
				}
				el.addEventListener('input',function () {
					console.log(el.value);
				})
			}
		}
	}
}

自定义指令参考链接

vue官方文档
elementUI 自定义指令使用案例

Logo

前往低代码交流专区

更多推荐