el-tree文字显示不全的解决办法_treeview里面的node的文本在界面中显示不完整

el-tree文字显示不全的解决办法

方法一：现实横向滚动条

在当前树节点的span标签上设置样式
overflow: auto; //或者 overflow-x: auto

方法二：通过… 来表示,鼠标移入现实全称

具体代码如下

<el-tree ref="tree" :data="treeMenus" :props="multiProps" :show-checkbox="true" :node-key="nodeId">

 <span class="span-ellipsis" slot-scope="{ node, data }">

  <span :title="node.label">{{ node.label }}</span>

 </span>

</el-tree>
1
2
3
4
5
6
7
8
9

给span标签添加样式，通过…表示文本未完全显示：

.span-ellipsis {

  width: 100%;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}
1
2
3
4
5
6
7
8
9
10
11

如果.span-ellipsis样式设置无效，可能需要加上display: block;

另一种解决方案解决el-tree文字展示不全的方法