elementui问题总结-select选择器

限制可创建条目的字数

修改源码，注释第5461行，增加第5462-5474行
getBytesByLength和getBytesLength是自定义的字符串截取和获取字符串英文字符长度

input: [function(t) {
	// t.target.composing || (e.query = t.target.value) // 注释行
	if (!t.target.composing) { // 新增 start
		if (e.$parent.inputMaxLen && e.$parent.inputMaxLen < t.target.value.getBytesLength()) {
			e.query = t.target.value.getBytesByLength(e.$parent.inputMaxLen);
			if (typeof e.$parent.checkInputLen == 'function') {
				e.$parent.checkInputLen(true);
			}
		} else {
			if (typeof e.$parent.checkInputLen == 'function') {
				e.$parent.checkInputLen(false);
			}
			e.query = t.target.value
		} 
	} // 新增 end
}, e.debouncedQueryChange]

注册时数据添加inputMaxLen，可创建的最大字数（英文字符）
checkInputLen(_param)： 监测字数回调，_paramtrue：字数超过限制,_paramfalse,字数未超过限制
例如：

• html:

<div class="el_select_wrap">
  <template>
    <el-select v-model="select_labels" value-key='id' multiple filterable allow-create default-first-option placeholder="请选择用户标签" class='el_select' @change='change_label' @remove-tag='remove_label' popper-class='el_select_dropdown'>
      <el-option v-for="item in users_labels" :key="item.id" :label="item.name" :value="item">
      </el-option>
    </el-select>
    <input type="hidden" v-for="item in select_labels" :value="item.id" name="label_id[]">
    <input type="hidden" v-for="item in new_labels" :value="item" name="label[]">
  </template>
</div>

• js

var selects_labels = [{id: 'id0', name: 'name0'}];
var select_labels = [];
 var selects_vue = new Vue({
   el: '#users_add_label',
   data: function() {
     return {
       users_labels: selects_labels, 
       select_labels: select_labels,
       old_labels: select_labels,
       new_labels: [],
       inputMaxLen: 100
     }
   },
   methods: {
     change_label(selval){
       $(".cuowu").html("");
       if (selval.length > this.old_labels.length) { // 新增
         var curr_label = selval[selval.length-1];
         if (typeof curr_label == 'string') { // 新增的都是string类型的
           if ($.inArray(curr_label, this.new_labels) == -1) {
             this.new_labels.push(curr_label);
           }
         }
       } else if (this.old_labels.length > 0) { // 删除
         if (selval.length > 0) {
           // 判断是否删除最后一个
           var old_last_label = this.old_labels[this.old_labels.length-1];
           if (typeof old_last_label == 'string') {
             var index = $.inArray(old_last_label, selval);
             if (index == -1) {
               this.new_labels.pop();
             }
           }
         } else {
           this.new_labels = [];
         }
       }
       this.old_labels = selval;
     },
     remove_label(selval){
       var index = $.inArray(selval, this.new_labels);
       if (index != -1) {
         this.new_labels.splice(index, 1);
       }
     },
     checkInputLen(_param){
       if (_param) {
         $(".cuowu").html("标签名称最多50个汉字或100个英文数字");
       } else {
         $(".cuowu").html("");
       }
     }
   }
 })

• css

.el_select_wrap{width: 100%; max-height: 150px; overflow: auto; border: 1px solid #dcdfe6;}
.el_select{width: 100%;}
.el_select .el-input__inner{border: none;}
.el_select .el-tag{height: auto;}
.el_select .el-select__tags-text{white-space: normal;}
.el_select_dropdown{max-width: 425px; max-height: 200px;}
.el_select_dropdown .el-select-dropdown__wrap{max-height: 200px;}