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

1.需求描述

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

2.先看下效果圖

3.實現(xiàn)思路

首先根據(jù)API文檔，先設(shè)置maxTagCount，最多顯示多少個 tag。
然后再設(shè)置 maxTagPlaceholder，隱藏 tag 時顯示的內(nèi)容，因為支持
插槽，所以我們可以這樣自定義：

父組件

<a-tree-selectstyle="width: 100%"v-model:value="searchValue"tree-checkableallow-clearshow-search:tree-data="treeData"placeholder="請選擇":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)鍵： 過濾選中的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.自定義一個toolTipTag 浮層組件

通過父傳子 currentCheckedKeys 進(jìn)行過濾選中的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>

收工！謝謝老鐵們的點贊收藏~