elementUI el-select allow-create属性 创建新条目时限制输入字符长度

el-select允许输入创建新tag，限制新tag输入字符长度

• 官方文档
• 思路：自定义验证规则，循环遍历绑定数组，逐个判断是否满足。

核心代码 验证部分

 // 验证标签长度
let tagslength = (rule, value, callback) => {
	if (value.length == 0) {
		callback(new Error('至少输入一个标签'))
	} else {
		var show = true
		for (let i in value) {
			if (value[i].name == undefined) {
				var tempValue = value[i]
			} else {
				var tempValue = value[i].name
			}
			var len = 0;
			for (let j = 0; j < tempValue.length; j++) {
				var c = tempValue.charCodeAt(j);
				//单字节加1
				if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
					len++;
				} else {
					len += 2;
				}
			}
			// console.log(len)
			if (len > 20) {
				show = false
			}
		}
		if (!show) {
			callback(new Error('标签名长度不能超过10！'))
		} else {
			callback()
		}
	}
}

全部代码

<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	  <el-form-item label="文章标签" prop="tags">
		  <el-select
		    v-model="ruleForm.tags"
		    multiple
		    filterable
		    allow-create
		    default-first-option
		    placeholder="请选择文章标签">
		    <el-option
		      v-for="item in options"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
	  	</el-select>
	  </el-form-item>
	<el-form>
</template>

<script>
  export default {
    data() {
	    // 验证标签长度
		let tagslength = (rule, value, callback) => {
			if (value.length == 0) {
				callback(new Error('至少输入一个标签'))
			} else {
				var show = true
				for (let i in value) {
					if (value[i].name == undefined) {
						var tempValue = value[i]
					} else {
						var tempValue = value[i].name
					}
					var len = 0;
					for (let j = 0; j < tempValue.length; j++) {
						var c = tempValue.charCodeAt(j);
						//单字节加1
						if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
							len++;
						} else {
							len += 2;
						}
					}
					// console.log(len)
					if (len > 20) {
						show = false
					}
				}
				if (!show) {
					callback(new Error('标签名长度不能超过10！'))
				} else {
					callback()
				}
			}
		}
      return {
        options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
       ruleForm: {
		tags: [], //注意这里是个数组
	},
	rules: {
		tags: [{
			required: true,
			type: 'array',
			trigger: 'change',
			validator: tagslength
		}]
	},
      }
    }
  }
</script>