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

在Element UI的el-select组件中使用allow-create属性允许用户创建新条目时，可以通过自定义输入组件的方式来限制字符长度。以下是一个简单的例子，展示如何在Vue中实现这一功能：

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: [],
      options: [],
      maxLength: 10, // 设置最大字符长度
    };
  },
  methods: {
    handleChange(value) {
      // 如果是创建新条目，检查长度
      if (this.options.findIndex(option => option.value === value) === -1) {
        if (value.length > this.maxLength) {
          this.$message.error(`标签名称最多只能输入${this.maxLength}个字符`);
          // 重置为之前的值
          this.value = this.value.filter(v => v !== value);
        } else {
          // 添加新的选项
          this.options.push({ label: value, value });
        }
      }
    },
  },
};
</script>

在这个例子中，我们定义了一个maxLength变量来设置最大字符长度。在handleChange方法中，我们检查了新创建的条目的长度，如果超出了最大长度，则使用$message.error来显示错误信息，并将输入的值从this.value中移除，以避免将无效值添加到选项中。如果长度合适，则将新的选项添加到options数组中。