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:

• 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;}

自定义筛选–未匹配到的内容不被清楚

  var myVue = new Vue({
      el: '#demo_el',
      data: function() {
        return {
          initarr: initarr, 
          copyarr: initarr,
          curr_model: {}
        }
      },
      methods: {
        visible_change: function(_show){
          if (!_show) {
            if (this.curr_model != '') {
              var name = '';
              if (typeof this.curr_model == 'string') {
                name = this.curr_model;
              } else {
                name = this.curr_model.id;
              }
              if (name != ''){
                for (var i = 0; i < this.copyarr.length; i++) {
                  var temp_name = this.copyarr[i].id;
                  if (temp_name == name) {
                      this.curr_model = this.copyarr[i];
                      break;
                  }
                }
              }
            }
          }
        },
        dataFilter: function(val) {
          var show_drop = true;
          this.curr_model = val;
          if (val) { //val存在
            this.initarr = this.copyarr.filter(function(item) {
              if (item.name.indexOf(val) != -1 || item.name.toUpperCase().indexOf(val.toUpperCase()) != -1) {
                return true;
              }
              return false;
            })

            if (this.initarr.length == 0) {
              this.initarr = this.copyarr;
              show_drop = false;
            }
          } else { //val为空时，还原数组
            this.initarr = this.copyarr;
          }
           // 判断是否需要显示下拉
          if (show_drop) {
            this.$refs.demo_el.focus();
            $('#demo_el .el-input__icon').addClass('is-reverse');
            $('.demo_el_dropdown').show();
          } else {
            $('.demo_el_dropdown').hide();
            $('#demo_el .el-input__icon').removeClass('is-reverse');
          }
        }
        }
      }
  })

输入时shift键入的内容不会被写入

添加handleShift，按下shift的时候去筛选

  var myVue = new Vue({
      el: '#demo_el',
      data: function() {
        return {
          initarr: initarr, 
          copyarr: initarr,
          curr_model: {}
        }
      },
      methods: {
        visible_change: function(_show){
          if (!_show) {
            if (this.curr_model != '') {
              var name = '';
              if (typeof this.curr_model == 'string') {
                name = this.curr_model;
              } else {
                name = this.curr_model.id;
              }
              if (name != ''){
                for (var i = 0; i < this.copyarr.length; i++) {
                  var temp_name = this.copyarr[i].id;
                  if (temp_name == name) {
                      this.curr_model = this.copyarr[i];
                      break;
                  }
                }
              }
            }
          }
        },
        dataFilter: function(val) {
          var show_drop = true;
          this.curr_model = val;
          if (val) { //val存在
            this.initarr = this.copyarr.filter(function(item) {
              if (item.name.indexOf(val) != -1 || item.name.toUpperCase().indexOf(val.toUpperCase()) != -1) {
                return true;
              }
              return false;
            })

            if (this.initarr.length == 0) {
              this.initarr = this.copyarr;
              show_drop = false;
            }
          } else { //val为空时，还原数组
            this.initarr = this.copyarr;
          }
           // 判断是否需要显示下拉
          if (show_drop) {
            this.$refs.demo_el.focus();
            $('#demo_el .el-input__icon').addClass('is-reverse');
            $('.demo_el_dropdown').show();
          } else {
            $('.demo_el_dropdown').hide();
            $('#demo_el .el-input__icon').removeClass('is-reverse');
          }
        },
        handleShift: function () {
          if (event && event.target.value) {
            this.dataFilter(event.target.value);
          }
        }
      }
  })