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

遇到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元素,对输入内容进行过滤

相关推荐
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef0610 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端12 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder12 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句13 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom13 小时前
JavaScript reduce()函数详解
javascript
小飞悟13 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子13 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript