el select开启collapse-tags属性怎么优化，比如不是默认显示一项后加一而是现实两项后再选择加一

可以看到框中只显示一项，后面选择的直接加一了再选依次增加，我怎么改才能根据框的长度，显示2项或者3项后，之后再选才是加一

您可以使用自定义的Vue组件代替el-select组件，并通过自定义的方式实现所需功能。以下是一个可能的解决方案：

创建一个自定义的Select组件，用于替代el-select组件，并扩展一个collapse-tags属性，初始值为false。

<template>
  <el-select
    v-model="currentValue"
    v-bind="$attrs"
    v-on="$listeners"
    multiple
    filterable
    reserve-keyword
    :collapse-tags="collapseTags"
  >
    <slot></slot>
  </el-select>
</template>

<script>
export default {
  name: 'CustomSelect',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Number, Array],
      default: ''
    },
    collapseTags: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue
    },
    currentValue(newValue) {
      this.$emit('change', newValue)
    }
  }
}
</script>

在父组件中使用自定义的Select组件，并根据需要将collapse-tags属性设为true或false，以控制标签的折叠效果。

<template>
  <div>
    <custom-select
      v-model="selected"
      :collapse-tags="collapseTags"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </custom-select>
    <el-checkbox v-model="collapseTags">Collapse tags every two items</el-checkbox>
  </div>
</template>

<script>
import CustomSelect from './CustomSelect'

export default {
  components: { CustomSelect },
  data() {
    return {
      selected: [],
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
        { label: 'Option 4', value: 'option4' },
        { label: 'Option 5', value: 'option5' }
      ],
      collapseTags: false
    }
  },
  watch: {
    selected(newValue, oldValue) {
      if (this.collapseTags && newValue.length % 2 ===  && oldValue.length < newValue.length) {
        newValue.splice(newValue.length - 2, 1)
      }
    }
  }
}
</script>

在上述示例中，我们使用自定义的CustomSelect组件代替了el-select组件，并扩展了一个collapseTags属性，用于控制标签的折叠效果。同时，在父组件中添加了一个el-checkbox组件，用于切换collapseTags属性的值。

值得注意的是，在selected属性发生变化（即用户选择或取消某个选项）时，父组件会监视selected属性的变化，并在collapseTags为true且选项总数为偶数时，在最后两个选项之间切换。这样，每选择两个选项，就会折叠一次标签。

引用chatGPT作答，

在CSS中为<select>标签添加overflow-y: auto属性，这将为其添加纵向滚动条。

使用JavaScript来检测当前选择框中的选项数量。您可以通过select.options.length来获取当前选项的数量。

如果选项数量达到您希望显示的数量（例如2或3），则将CSS中的overflow-y属性更改为scroll，这将为其添加纵向滚动条。

下面是一个示例代码片段，可以帮助您开始实现这个目标：
1.HTML:

<select id="my-select">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
  <option value="option-4">Option 4</option>
  <option value="option-5">Option 5</option>
  <option value="option-6">Option 6</option>
</select>

2.CSS:

#my-select {
  overflow-y: auto;
}

3.JavaScript:

const select = document.getElementById('my-select');

select.addEventListener('change', () => {
  const numOptionsToShow = 2; // Change this to the number of options you want to show before adding a scrollbar
  if (select.options.length > numOptionsToShow) {
    select.style.overflowY = 'scroll';
  }
});

在这个示例中，当用户选择一个选项时，JavaScript代码将检查当前选择框中的选项数量是否超过了numOptionsToShow，如果是，则将CSS中的overflow-y属性更改为scroll。您可以将numOptionsToShow更改为您希望显示的选项数量，以满足您的需求。

:collapse-tags="currentValue.length > 3 ? true:false"

该回答引用ChatGPT
在elementUI中，el-select组件的collapse-tags属性控制是否将选中的标签折叠（只显示第一个标签，并在其后显示选中的标签数量）。如果你希望在选中一定数量的标签后再开始折叠，需要进行一些自定义操作。

一种解决方案是使用自定义模板来代替el-select的默认模板。在这个自定义模板中，你可以根据选中的标签数量来控制是否折叠，并使用v-for指令来遍历数据。

代码示例：



  
    
      请选择
      
        
          {{item.label}}
          x
        

        
          +{{selected.length-2}}
        

        
          
        

      
    

    
  


<script>
export default {
  data() {
    return {
      selected: [],
      options: [],
      collapse: true, // 控制是否折叠
    };
  },
  methods: {
    handleClose(index) {
      this.selected.splice(index, 1);
    },
    handleAdd() {
      this.collapse = false;
      this.selected.push(this.options[0]);
    },
    handleCollapse() {
      this.collapse = true;
    }
  },
  mounted() {
    // 初始化数据
    for (let i = 1; i <= 10; i++) {
      this.options.push({
        value: i,
        label: `选项${i}`,
      });
    }
  },
}
</script>

在这个示例中，在el-select组件中通过v-slot:default来使用自定义模板。在这个自定义模板中，我们使用了一个div元素来代替el-select的默认下拉框，并使用flex布局来控制标签的样式。

我们通过一个selected数组来维护所有选中的数据，并使用一个options数组来维护所有可选的数据。在mounted阶段，我们初始化options数组。

在自定义模板中，我们使用v-for指令遍历selected数组中的数据，并将每个数据渲染成一个tag标签。这里的tag标签是一个div元素，其中第一个span元素用于显示标签内容，第二个span元素用于显示删除按钮。点击删除按钮会调用handleClose方法，从selected数组中移除该数据。

当selected数组为空时，我们显示一个placeholder。当selected数组不为空时，我们通过一个more元素来显示更多选中的标签数量（只有当selected数组中的数据数量大于2时才显示）。如果想要添加新的数据，我们可以通过一个add元素来实现，这里使用了一个el-icon-plus来显示添加图标。点击add元素会调用handleAdd方法，将options数组中的第一个数据添加到selected数组中。

最后，我们需要在handleAdd和handleClose方法中添加额外的逻辑来控制是否折叠选中的标签。只有在selected数组中的数据数量大于2时，我们才会折叠这些数据。在handleCollapse方法中，我们将collapse属性设置为true，表示要折叠选中的标签。

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
在el-select中开启collapse-tags属性后，加入新的tag时只会显示最新添加的tag，其它tag会被折叠起来。如果希望在选择tag时显示多个tag，可以通过修改el-select的dropdown-item-template来实现。

下面是一个示例代码，实现了当框中已有两个tag时，再加入新的tag时，先显示两个tag，之后再多选一个tag时，所有的tag都会显示出来：

<el-select
  v-model="selectedTags"
  multiple
  collapse-tags
  @visible-change="handleVisibleChange"
  :dropdown-item-template="renderTag"
  :filterable="filterable"
>
  <el-option
    v-for="item in tagList"
    :key="item"
    :label="item"
    :value="item">
  </el-option>
</el-select>

data() {
  return {
    tagList: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
    selectedTags: [],
    filterable: true,
    visibleTagCount: 2, // 控制显示tag的数量
  };
},
methods: {
  // 处理选择tag后显示的模板
  renderTag(h, option) {
    if (this.selectedTags.length <= this.visibleTagCount) {
      // 只显示前visibleTagCount个tag
      return (<span>{option.label}</span>);
    } else if (option.index === this.selectedTags.length - 1) {
      // 最后一个tag显示为带省略号的标签，表示还有剩余tag未显示
      const moreCount = this.selectedTags.length - this.visibleTagCount;
      return (
        <el-tag type="info">
          {option.label}
          <span style={{color: '#666'}}> + {moreCount} more </span>
        </el-tag>
      );
    }
  },
  // 监听下拉框打开和关闭事件
  handleVisibleChange(visible) {
    this.visibleTagCount = visible ? this.selectedTags.length : 2;
  },
},

在上面的代码中，我们使用了el-select的dropdown-item-template属性，将其指向了一个自定义的模板函数renderTag。在该函数中，我们根据selectedTags数组的长度，来决定显示哪些tag。如果不超过visibleTagCount个，就显示前visibleTagCount个tag；如果超过visibleTagCount个，就只显示前visibleTagCount-1个tag，把最后一个tag显示为一个带省略号的标签，表示还有剩余tag未显示。在下拉框打开和关闭事件中，我们通过visible属性来动态更新visibleTagCount，以保证显示的tag数量正确。

希望这个代码能够解决你的问题。
如果我的回答解决了您的问题，请采纳！

具体来说，我们首先获取下拉框的高度和每一项的高度，然后计算出需要显示的选项数量。如果当前选中的项在可见选项范围内，我们就将可见选项的起始索引设置为当前选中项所在的索引减去可见选项数量再加一；否则，我们就将可见选项的起始索引设置为当前选中项所在的索引。

最后，我们通过Array的slice方法，将可见选项从options数组中截取出来，并将它们赋值给visibleOptions变量，以便在下拉框中渲染出来。

需要注意的是，上面的代码只是一个简单的示例，如果要实际应用到项目中，还需要进行一些完善，比如处理边界情况等。
如果我的建议对您有帮助、请点击采纳、祝您生活愉快

不知道你这个问题是否已经解决, 如果还没有解决的话:

这个问题的回答你可以参考下: https://ask.csdn.net/questions/329210
你也可以参考下这篇文章：解决 Element-UI el-select多选以collapse-tags展示时，超过显示长度溢出的问题

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^