Vue - Element 选择器 el-select 既可以选择下拉又可以手动输入文本功能（手动输入的值只能是数字并且支持4位小数）

在这里插入图片描述

备注
filterable 下拉框开启快速搜索功能
no-match-text 当输入的内容在下拉框中找不到时；下拉框提示的文字
@handFocus 触发输入框
@change 点击下拉选项
@visible-change下拉框出现/隐藏时触发
@keyup.native 输入搜索内容实时触发（在此方法中对输入格式做限制）

template部分

 <el-selectv-model="min"filterableplaceholder="最小值"no-match-text="可手动输入"style="width:90px;margin-right: 4px;"ref="inputSelectMin" @focus="handFocus" @change="handChange"@visible-change="handleVisibleChange"@keyup.native="inputData"
><el-optionv-for="item in minToleranceTypeList":key="item.codeValue":label="item.name":value="item.codeValue" />
</el-select>

逻辑部分（ el-select 实现既可以输入内容又可以快速选择）

  private isSelectChange:boolean= false;// 判断是选择下拉选项 默认未选择handChange (data:any) {this.min = datathis.isSelectChange = true;}handleVisibleChange(val:any){if(!val){let input = this.$refs[ref]?.$children[0].$refs.input;input.blur();}}handFocus(){let input = this.$refs.inputSelectMin?.$children[0].$refs.input;input.blur= ()=> {if (!this.isSelectChange) {this.min = input.value;}this.isSelectChange = false}}// 输入框只能输入数字，最大可支持4位小数inputData(val:any){let strData = val.srcElement.valueif (/^(\.)/.test(strData)) {// 匹配第一个字符是否为 .val.srcElement.value = strData.substring(strData.lastIndexOf(".") + 1,strData.length);return;}if (/[^\d.]+/.test(strData)) {// 匹配中间是否插入了字母,等其他字符val.srcElement.value = strData.replace(/[^\d.]+/, "");return;}if (/([0-9]\d*)(\.\d*){2,}/.test(strData)) {// 匹配是否有多个 . --恶意输入val.srcElement.value = "";return;}if (/^([0-9]\d{0,7}(\.\d{5,}))$/.test(strData)) {// 小数点后是否超过了3位-恶意输入val.srcElement.value = strData.substring(0, strData.lastIndexOf(".") + 5);return;}val.srcElement.value = strData.substring(0, strData.length);}