それが達成できたら、「いいね！」とシェアを忘れずに、ありがとうございます~
1.要件の説明
参照されるドロップダウン ツリー構造は複数の選択をサポートしており、選択されるタグの数は制限されています。数が指定された数を超える場合、マウスをホバーすると選択されたタグがさらに表示されます。
2. まずレンダリングを見てみましょう
3. アイデアを実現する
まず、API ドキュメントに従って、maxTagCount を設定して、表示するタグの最大数を決定します。
次に、タグを非表示にしたときにコンテンツを表示するように maxTagPlaceholder を設定します。
スロットをサポートしているため、次のようにカスタマイズできます。
親コンポーネント
<a-tree-select
style="width: 100%"
v-model:value="searchValue"
tree-checkable
allow-clear
show-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[]>([]);
// 关键： 过滤选中的label - value
const 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 を親から子に渡して、選択したラベルの表示名をフィルターします。
サブアセンブリ
<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>