el

2023-12-10 21:08| 来源: 网络整理| 查看: 265

需要注意的地方

1. 为了在匹配不到数据时也保留其输入的值，可以用 filter-method 自定义筛选

2. el-select添加上filterable之后，点击展开，点击收起，会导致focus和blur事件不触发，但点击页面其他地方才可正常触发，可利用visible-change 事件来解决些问题

3. input获取焦点时保留其value值用focus事件做相关赋值处理

具体实现代码如下

export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }], optionsFilter: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }], value: '' } }, methods: { dataFilter(val) { this.value = val; if (val) { this.options = this.optionsFilter.filter((item) => { if (item.label.includes(val) || item.label.toUpperCase().includes(val.toUpperCase())) { return true } }) } else { this.options = this.optionsFilter; } }, selectFocus(e){ let value = e.target.value; setTimeout(() => { let input = this.$refs.searchSelect.$children[0].$refs.input; input.value = value; }) }, selectBlur(){ //console.log('失去') }, selectChange(){ }, visibleChange(val){ if(!val){ let input = this.$refs.searchSelect.$children[0].$refs.input; input.blur(); } } } }

【本文地址】

el

el

今日新闻

推荐新闻