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

javascript
<template>
<el-tree
show-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>