<template><div class="app"><h4>=========默认情况下的select组件在设置collapse-tags-tooltip后，只有在鼠标移入折叠标签后才显示文本</h4><el-selectmultiplecollapse-tagscollapse-tags-tooltipv-model="select_value_1"placeholder="Select"style="width: 240px"><el-optionv-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-selectmultiplecollapse-tagsv-model="select_value_2"placeholder="Select"style="width: 240px"><el-optionv-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-selectref="select_ref"multiplecollapse-tagscollapse-tags-tooltipv-model="select_value_1"placeholder="Select"style="width: 240px"><el-optionv-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>