vue2 el-select filterable allow-create 格式限制 或者去 空格

背景

在使用vue2 el-select中，有些下拉框需要 搜索+创建 filterable allow-create，

运营人员可能会直接创建一些值，这些值有些是手打的，有些是从其他地方粘贴的

在粘贴过程中可能会粘贴到空格，但是 el-select 没有限制空格的方法或者属性，

在网上找了一些方法，都太麻烦，也不方便使用，

自己研究了下，解决方案如下，直接上代码

1.自定义指令

const selectTrim = {
  bind(el, { value }, vNode) {
    const componentInstance = vNode.componentInstance
    if(!(componentInstance && componentInstance.filterable)){
      return;
    }
    // 获取组件实例，获取查询参数，修改查询参数
    el.__zbb_handler__ = (e) => {
      // 此处可以用来做其他格式限制，获取组件实例修改其内容
      componentInstance.query = componentInstance.query.trim()
    };
    el.addEventListener('input', el.__zbb_handler__);
  },
  unbind(el) {
    if (typeof el.__zbb_handler__ === 'function') {
      el.removeEventListener('input', el.__zbb_handler__);
      delete el.__zbb_handler__;
    }
  }
}
const install = function (Vue) {
  Vue.directive("selectTrim", selectTrim);
};

selectTrim.install = install;
export default selectTrim;

2.引入

import selectTrim from "@/directive/selectTrim/index";
Vue.use(selectTrim);

3.使用:给el-select 加上指令 v-select-trim

<el-select v-select-trim  class="attr-select" v-model="form.attr_code" placeholder="请选择" clearable multiple allow-create filterable>
  <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" ></el-option>
</el-select>

结语

可以在 zbb_handler 里做各种逻辑判断
这种方法不止能禁止空格，还能限制只能数字输入 或者其他格式
其他就看自己发挥了。