如果可以实现记得点赞分享,谢谢老铁~
1.需求描述
引用的下拉树形结构支持多选,限制选中tag的个数,且超过制定个数,鼠标悬浮展示更多已选中。
2.先看下效果图
3.实现思路
首先根据API文档,先设置maxTagCount,最多显示多少个 tag。
然后再设置 maxTagPlaceholder,隐藏 tag 时显示的内容,因为支持
插槽,所以我们可以这样自定义:
父组件文章来源:https://www.toymoban.com/news/detail-650891.html
<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 进行过滤选中的label展示名称。
子组件文章来源地址https://www.toymoban.com/news/detail-650891.html
<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>
收工!谢谢老铁们的点赞收藏~
到了这里,关于vue所有UI库通用)tree-select 下拉多选(设置 maxTagPlaceholder 隐藏 tag 时显示的内容,支持鼠标悬浮展示更多的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!