element-plus el-select

<template>
  <div class="app">
    <h4>
      =========默认情况下的select组件在设置collapse-tags-tooltip后，只有在鼠标移入折叠标签后才显示文本
    </h4>
    <el-select
      multiple
      collapse-tags
      collapse-tags-tooltip
      v-model="select_value_1"
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <h3>需求：让第一个鼠标移入也有tooltip效果</h3>
    <h4>
      =========方式1：使用el-select的自定义标签+tooltip组件结合(缺点：需要编写大量的代码去处理)
    </h4>
    <el-select
      multiple
      collapse-tags
      v-model="select_value_2"
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <template #tag>
        <template v-if="select_value_2.length >= 1">
          <el-tooltip effect="light" placement="bottom">
            <template #content>
              <span class="custom-select-item">
                {{ select_value_2[0] }}
                <i class="el-icon el-tag__close" @click="onSelectItemCloseClick(0)">
                  <el-icon><Close /></el-icon>
                </i>
              </span>
            </template>
            <span class="custom-select-item">
              {{ select_value_2[0] }}
              <i class="el-icon el-tag__close" @click="onSelectItemCloseClick(0)">
                <el-icon><Close /></el-icon>
              </i>
            </span>
          </el-tooltip>

          <template v-if="select_value_2.length >= 2">
            <el-tooltip effect="light" placement="bottom">
              <template #content>
                <div class="collapse-hover-box">
                  <template v-for="(item, index) in select_value_2.slice(1)" :key="index">
                    <span class="custom-select-item">
                      {{ item }}
                      <i class="el-icon el-tag__close" @click="onSelectItemCloseClick(index + 1)">
                        <el-icon><Close /></el-icon>
                      </i>
                    </span>
                  </template>
                </div>
              </template>
              <span class="custom-select-item custom-collapse">
                +{{ select_value_2.length - 1 }}
              </span>
            </el-tooltip>
          </template>
        </template>
      </template>
    </el-select>
    <h4>=====方式2：能否用 collapse-tags-tooltip</h4>
    <button class="test-btn" @click="onTest">测试</button>
    <el-select
      ref="select_ref"
      multiple
      collapse-tags
      collapse-tags-tooltip
      v-model="select_value_1"
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script setup>
import { ref } from "vue";

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const select_value_1 = ref([]);
const select_value_2 = ref([]);
const onSelectItemCloseClick = (index) => {
  select_value_2.value.splice(index, 1);
};

const select_ref = ref();
const onTest = () => {
  console.log(select_ref.value);
};
</script>

<style lang="less" scoped>
.custom-select-item {
  display: flex;
  align-items: center;
  background-color: #f4f4f5;
  color: #909399;
  font-size: 12px;
  padding: 0 9px;
  .el-tag__close {
    margin-left: 6px;
  }
}

.collapse-hover-box {
  display: flex;
  .custom-select-item {
    margin-right: 5px;
    &:nth-last-child(1) {
      margin-right: 0;
    }
  }
}
</style>