If it can be achieved, remember to like and share, thank you~
1.Description of requirements
The referenced drop-down tree structure supports multiple selections, and the number of selected tags is limited. If the number exceeds the specified number, hovering the mouse will display more selected tags.
2. Take a look at the renderings first
3. Implement ideas
First, according to the API documentation, set maxTagCount to determine the maximum number of tags to display.
Then set maxTagPlaceholder to display the content when hiding the tag. Because it supports
slots, we can customize it like this:
parent component
<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. Customize a toolTipTag floating layer component
Filter the selected label display name by passing currentCheckedKeys from parent to child.
Subassembly
<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>