el-select开启filterable模式，限制输入框输入类型

爱吃水果和蔬菜丫

已于 2025-03-26 17:34:55 修改

阅读量531

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

于 2025-03-26 17:33:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43392673/article/details/146536162

遇到el-select开启filterable模式查询，下拉框内容是文字与数字组合版，导致校验不准，且没有属性能直接限制focus输入的内容，这时候可以用自定义属性来解决
实例：（以只能输入数字为例）

在这里插入图片描述

<el-form-item
          label="ID"
          prop="Id"
        >
          <el-select
            ref="selectRef"
            v-model="dialogForm.Id"
            :remote-method="handleChange"
            :loading="loading"
            filterable
            remote
            clearable
            placeholder="请输入ID搜索"
            @change="handleChange"
             v-numeric-only
          >
            <el-option
              v-for="(item,index) in List"
              :key="index"
              :label="item.name+'('+item.Id+')'"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

以上template内容

   data(){},
  directives: {
     'numeric-only': {
       inserted(el) {
         const input = el.querySelector('.el-input__inner');
         input.addEventListener('input', function () {
             if (this.value.length > 10) {
                 this.value = this.value.slice(0, 10)
             }
             this.value = this.value.replace(/[^\d]/g, '');
         });
       }
     }
   }
methods:{
	//change事件再次强制替换
	 handleChange(value) {
      let val = value.toString().replace(/[^\d]/g, '')
      if (val.length > 10) {
        val = val.slice(0, 10)
      }
     //  this.getMethod(val).    此处调接口
    }
}

以上script内容，思路是直接获取到它的input元素，对输入内容进行过滤