多个el-select，循环出来的el-select搜索时，去除空格，限制el-select输入内容控制等

单个el-select搜索框如何去除空格限制el-select输入内容控制等在这篇文章：http://t.csdn.cn/u7C6O​​​​​​​r

如果多个el-select循环出来的，上面文章说的方法就会失效，下面是解决方法

需求描述：

1. 多个el-select下拉框，带搜索过滤功能（直接在el-select上使用filterable实现）

2. 但是同时要求el-select搜素输入框去除空格

HTML代码 

          <div
            v-for="(item, index) in testList1"
            :key="index"
          >
            <el-select
              :ref="`elementSelect${index}`"
              v-model="item.name"
              filterable
              style="width: 35%; margin-right: 20px"
              placeholder="请选择"
              value-key="name"
              @input.native="trimInput(index)"
            >
              <el-option
                v-for="items in testList2"
                :key="items.dataId"
                :label="items.name"
                :value="items"
                :disabled="items.disabled"
              ></el-option>
            </el-select>
           </div>

在el-select标签上增加ref属性与@input属性（记得.native）

注意：此处的ref需要写成变量的，笔者此处使用的循环出来的index下标，保证每个循环出来的下拉框ref值都不一样

数据就不贴在这了，笔者认为多少数据对需求无影响。循环出来多少下拉框效果都一样。

JS代码 

    trimInput(index) {
      this.$refs[`elementSelect${index}`][0]._data.selectedLabel =
        this.$refs[`elementSelect${index}`][0]._data.selectedLabel.trim()
    },

非常的简单，就可以实现上面的需求了

区别 

单个选择框与循环出来多个选择框区别：

1. ref需要是不同的

        单选择框ref固定值即可
        多选择框ref不能使用同一个，否则会出现错误

1. 获取输入框的内容取值也是不同的

        单选框的获取方式是$refs.name.$data.selectedLabel
        多选框的获取方式是$refs.name._data.selectedLabel

        一字之差，但是结果却千差万别