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

相关推荐
今禾几秒前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter几秒前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Mintopia9 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
Code季风11 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录12 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia13 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
雲墨款哥15 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023419 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder25 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
晴殇i1 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css