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>