element-ui 选择组件 el-select远程搜索功能，实现对输入内容和长度的限制

需求如下：远程搜索select限制搜索内容输入的长度

方法一：限制长度为30，没有提示，直接截取前30个字符

加了id选择器，实测el-select加class类选择器并不能够渲染出来，加了也是无效的。el-select的本质还是input，原生js通过setAttribute直接设置组件内input元素的maxlength属性即可

html：

 <el-form-item label="礼品名称" prop="name" >
                <el-select
                  id="giftNameLimit"
                  v-model="query.name"
                  filterable
                  remote
                  reserve-keyword
                  clearable
                  placeholder="请输入礼品名称"
                  :remote-method="queryGiftNameList">
                <el-option
                  v-for="(item,i) in giftNameList"
                  :key="i"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
   </el-form-item>

js：

 methods: {     
     dom() {
      const input = document.querySelector("#giftNameLimit");
      input.setAttribute("maxLength", 30);
     },
}

 mounted/activated() {
      this.dom();
    },

方法二：限制输入内容为汉字，限制长度为30，并弹框提示

 dom() {
       const input1 = document.querySelector("#giftNameLimit");
       let self = this;
       input1.onchange = function(){
          let reg = /^[\u4e00-\u9fa5]{0,30}$/
           if(!reg.test(input1.value)||input1.value.length>30){
             self.$alert('礼品名称最多可输入30个汉字', '提示', {
                confirmButtonText: '确定',
                type: 'warning',
                  callback: action => {
                     self.query.name = '';
                }
            });
        }
      }
}

方法三：通过.native获取内部input （这个是从别的博客看到的，还没有亲测）

html：

<el-select
  v-model="searchForm.productId"
  placehoder="请输选择产品或输入产品名字过滤"
  filterable
  @input.native="filterData"
  clearable
  ref="searchSelect"
>
<el-select>

js：

// 对输入字符串控制
filterData(){
var str = this.$refs.searchSelect.$data.selectedLabel;// 此属性得到输入的文字
// 控制的js
if(str.length>20){this.$refs.searchSelect.$data.selectedLabel = str.substr(0,21)
}