一、示例代码

<divstyle="height: 600px;overflow: auto"class="text item"><el-treeref="tree":data="treeData":props="defaultProps"class="filter-tree"node-key="id"default-expand-all@node-click="getTableData"><templateslot-scope="{node}"class="custom-tree-node"><!--                <span>{{ node.label }}</span>--><!--                <span v-show="!data.children"><el-button type="text" size="mini" @click="() => crud.toAdd(data)">新增</el-button></span>--><spanv-if="node.label.length <= 10"class="tree-text"> {{ node.label }}</span><el-tooltipv-elseeffect="dark":content="node.label"placement="top"><span class="tree-text"> {{ node.label }}</span></el-tooltip></template></el-tree></div>

二、关键代码

1. 树形代码

    <spanv-if="node.label.length <= 10"class="tree-text"> {{ node.label }}</span><el-tooltipv-elseeffect="dark":content="node.label"placement="top"><span class="tree-text"> {{ node.label }}</span></el-tooltip>

2. 样式代码

.tree-text {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: inline-block;min-width: 300px;
}

三、效果图