element-plus进阶使用:限制el-Select的输入字符数量

一.问题背景

        接到个需求,限制el-Select的输入字符数量,本来el-select是不能输入的,但是开启远程搜索后就可以输入,问题是官方文档并没有给出限制输入的方法,所以需要我们自己解决

以下为背景代码

<el-select
    style="width: 240px"
    v-model="tid"
    filterable
    remote
    clearable
    reserve-keyword
    placeholder="请输入门店信息"
    @change="chooseTenant"
    :remote-method="searchTenantList"
  >
    <el-option
      v-for="item in tenantList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
      {{ item.name+'  ('+item.pref+')' }}
      </el-option>
  </el-select>

二.解决方法

        在外部传限制属性给内部是没有效果的,如maxlength;还有获取输入的值,再去限制v-model绑定的值也不会回显,经过查阅资料,发现只能对element组件里面的原生元素进行限制才有效果,以下是解决代码:

<el-select
    style="width: 240px"
    class="tenant-select"
    v-model="tid"
    filterable
    remote
    clearable
    reserve-keyword
    placeholder="请输入门店信息"
    @visible-change="onVisibleChange"
    @change="chooseTenant"
    :remote-method="searchTenantList"
  >
    <el-option
      v-for="item in tenantList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
      {{ item.name+'  ('+item.pref+')' }}
      </el-option>
  </el-select>

// 当下拉面板展开时,设置输入框最大长度
const onVisibleChange = (visible: boolean) => {

  if (visible) {
    nextTick(() => {
      const inputEl = document.querySelector('.tenant-select input')
      if (inputEl) {
        inputEl.setAttribute('maxlength', '50')
      }
    })

  }
}

1.添加类名,以便我们获取到组件内部的input元素

2.设置内部限制属性

注意,获取内部input元素时,最好使用debugger和控制台输出一下 inputEl 的值,检查我们是否准确获取   ,我就因为获取到其他的input标签导致卡了很久

补充:

nextTick 的作用

  nextTick 能够确保在 DOM 更新完成之后再执行回调函数。在这个例子中,nextTick 会等待下拉面板展开所引发的 DOM 更新操作完成,之后再去获取输入框元素并设置 maxlength 属性,这样就能保证操作可以成功。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值