限制可创建条目的字数
修改源码,注释第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);
}
}
}
})