如果可以實(shí)現(xiàn)記得點(diǎn)贊分享，謝謝老鐵～

1.需求描述

引用的下拉樹形結(jié)構(gòu)支持多選，限制選中tag的個(gè)數(shù)，且超過(guò)制定個(gè)數(shù)，鼠標(biāo)懸浮展示更多已選中。

2.先看下效果圖

3.實(shí)現(xiàn)思路

首先根據(jù)API文檔，先設(shè)置maxTagCount，最多顯示多少個(gè) tag。
然后再設(shè)置 maxTagPlaceholder，隱藏 tag 時(shí)顯示的內(nèi)容，因?yàn)橹С?br /> 插槽，所以我們可以這樣自定義：

父組件

<a-tree-selectstyle="width: 100%"v-model:value="searchValue"tree-checkableallow-clearshow-search:tree-data="treeData"placeholder="請(qǐng)選擇":max-tag-text-length="maxTagTextLength":max-tag-count="maxTagCount" ><template #maxTagPlaceholder><tool-tip-tag:currentCheckedKeys="dealCheckedList(treeData, searchValue)"></tool-tip-tag></template></a-tree-select><script lang="ts">
import { toRefs, watch, ref } from "vue";
export default {setup(porps) {const searchValue = ref<string[]>([]);// 關(guān)鍵： 過(guò)濾選中的label - valueconst dealCheckedList = (treeData, list) => {let dataList = treeToList(treeData);return [...new Set(dataList)].filter((item: any) =>list.includes(item.value));};return { dealCheckedList,searchValue };},
};
</script>

4.自定義一個(gè)toolTipTag 浮層組件

通過(guò)父?jìng)髯?currentCheckedKeys 進(jìn)行過(guò)濾選中的label展示名稱。
子組件

<template><a-tooltip:overlayStyle="{overflow: 'auto',maxHeight: '750px',width: '300px',}"><template #title><div class="item" v-for="(item, i) in checkedList" :key="i"><div>{{ item?.title }}</div></div></template><span>{{ expandText }}</span></a-tooltip>
</template><script lang="ts">
import { toRefs, watch, ref } from "vue";
export default {name: "ToolTipTag",props: {currentCheckedKeys: Array,expandText: {type: String,default: () => "+ 更多 ...",},},setup(porps) {let { currentCheckedKeys } = toRefs(porps);let checkedList = ref<any>(currentCheckedKeys.value);watch(() => currentCheckedKeys.value,(val) => {checkedList.value = currentCheckedKeys.value;});return { checkedList };},
};
</script>

收工！謝謝老鐵們的點(diǎn)贊收藏~