解决后的最终展示效果是el-tree
溢出部分以省略号显示,鼠标悬停在文本上会显示出文本全部内容。
<el-tree class="expandTree" highlight-current :data="treeData" :props="defaultProps"
@node-click="handleNodeClick">
//重点在类 custom-tree-node 和 :title="node.label" v-text="node.label" 上
<span slot-scope="{ node, data }" class="custom-tree-node" :title="node.label"
v-text="node.label">
</span>
</el-tree>
//通过自定义树形结构行内容,实现文本过多时数据不显示的问题,现在效果为显示省略号,且鼠标移上去会显示出全部文本内容
.custom-tree-node {
width: 100%;
overflow: hidden !important; // 溢出部分隐藏
white-space: nowrap !important; //禁止自动换行
text-overflow: ellipsis !important; // 使溢出部分以省略号显示
display: block !important;
font-size: 20px;
}