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

Question

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

Answer 1

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

1. 创建一个自定义的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>

1. 在父组件中使用自定义的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且选项总数为偶数时，在最后两个选项之间切换。这样，每选择两个选项，就会折叠一次标签。