el-select可以新建条目时 限制输入字数

在Element UI的el-select组件中，当开启了allow-create属性用于新建条目时，可以通过popper-class属性来为下拉菜单设置一个自定义的class，然后通过CSS限制输入字数。

以下是一个简单的示例，展示了如何限制输入字数为5个字符：

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择条目"
    popper-class="select-popper"
  >
    <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: [
        { value: 'Option1', label: 'Option 1' },
        { value: 'Option2', label: 'Option 2' },
        // ...更多选项
      ],
    };
  },
};
</script>
 
<style scoped>
.select-popper .el-input__inner {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 150px; /* 限制字数为5个字符，每个中文字或英文字母占据的宽度大约为16px */
}
</style>

在这个示例中，max-width设置为150px，这意味着可以输入大约150px / 16px = 9.375个字符。如果需要精确到中文字数限制，可以根据字体大小和字体的具体实现调整这个宽度值。