2019年最好的国外vps_网页设计费用标准_seo顾问服务 品达优化_临沂头条新闻今日头条

tree悬停tooltip效果

文本过长超出展示省略号 
如果文本超出悬停显示tooltip效果 反之不显示
这里直接控制固定宽度限制 试了监听宽度没效果

<template><el-treeshow-checkbox:check-strictly="true":data="data"node-key="id":props="defaultProps"><template #default="{ node }"><span><el-tooltip :content="node.label" :disabled="!isTextOverflow(node.label)" placement="top"><span class="tree-node-label">{{ node.label }}</span></el-tooltip></span></template></el-tree>
</template><script>
import { ref } from 'vue';export default {setup() {const data = ref([{ id: 1, name: 'Parent Node with very long text content that may overflow' },{ id: 2, name: 'Parent',children: [{ id: 21, name: 'Child Node with normal length' }]}]);const maxCharLength = ref(10);//定义最大字符 根据需求可调整const defaultProps = {label: 'name',children: 'children'};// 检测文本是否溢出const isTextOverflow = (label) => {return label.length > maxCharLength.value;};return {data,defaultProps,isTextOverflow};}
};
</script><style scoped>
.tree-node-label {display: inline-block;max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;
}
</style>