营销型网站是什么意思,百度seo提高排名费用,广西住房城乡建设领域三新技术网,网吧设计装饰公司如果可以实现记得点赞分享#xff0c;谢谢老铁#xff5e;
1.需求描述
引用的下拉树形结构支持多选#xff0c;限制选中tag的个数#xff0c;且超过制定个数#xff0c;鼠标悬浮展示更多已选中。
2.先看下效果图 3.实现思路
首先根据API文档#xff0c;先设置maxTagC…如果可以实现记得点赞分享谢谢老铁
1.需求描述
引用的下拉树形结构支持多选限制选中tag的个数且超过制定个数鼠标悬浮展示更多已选中。
2.先看下效果图 3.实现思路
首先根据API文档先设置maxTagCount最多显示多少个 tag。 然后再设置 maxTagPlaceholder隐藏 tag 时显示的内容因为支持 插槽所以我们可以这样自定义
父组件
a-tree-selectstylewidth: 100%v-model:valuesearchValuetree-checkableallow-clearshow-search:tree-datatreeDataplaceholder请选择:max-tag-text-lengthmaxTagTextLength:max-tag-countmaxTagCount template #maxTagPlaceholdertool-tip-tag:currentCheckedKeysdealCheckedList(treeData, searchValue)/tool-tip-tag/template/a-tree-selectscript langts
import { toRefs, watch, ref } from vue;
export default {setup(porps) {const searchValue refstring[]([]);// 关键 过滤选中的label - valueconst dealCheckedList (treeData, list) {let dataList treeToList(treeData);return [...new Set(dataList)].filter((item: any) list.includes(item.value));};return { dealCheckedList,searchValue };},
};
/script4.自定义一个toolTipTag 浮层组件
通过父传子 currentCheckedKeys 进行过滤选中的label展示名称。 子组件
templatea-tooltip:overlayStyle{overflow: auto,maxHeight: 750px,width: 300px,}template #titlediv classitem v-for(item, i) in checkedList :keyidiv{{ item?.title }}/div/div/templatespan{{ expandText }}/span/a-tooltip
/templatescript langts
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 refany(currentCheckedKeys.value);watch(() currentCheckedKeys.value,(val) {checkedList.value currentCheckedKeys.value;});return { checkedList };},
};
/script
收工谢谢老铁们的点赞收藏~
