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 属性，这样就能保证操作可以成功。