elementui问题总结-select选择器

6 篇文章 0 订阅
2 篇文章 0 订阅

限制可创建条目的字数

修改源码,注释第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;}

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

<template>
	<el-select id="demo_name" v-model="curr_model" name="name" value-key='id' placeholder="请选择或输入" class='el_select el_dropdown' filterable popper-class='demo_el_dropdown' ref="demo_el" :filter-method="dataFilter" @visible-change='visible_change'>
    <el-option v-for="item in initarr" :key="item.id" :label="item.name" :value="item">
    </el-option>
  </el-select>
  <input type="hidden" id="" name="id" :value="curr_model.id">
</template>

  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的时候去筛选

<template>
	<el-select id="demo_name" v-model="curr_model" name="name" value-key='id' placeholder="请选择或输入" class='el_select el_dropdown' filterable popper-class='demo_el_dropdown' ref="demo_el" :filter-method="dataFilter" @visible-change='visible_change' @keyup.16.native="handleShift">
    <el-option v-for="item in initarr" :key="item.id" :label="item.name" :value="item">
    </el-option>
  </el-select>
  <input type="hidden" id="" name="id" :value="curr_model.id">
</template>

  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);
          }
        }
      }
  })
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值