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

因为element ui官方el-tree文档里没有给节点插入title标签的说明，于是我打开源码在其对应节点的span标签强制写上title="node.name"之类的并没有任何用处。

直到看到自定义节点内容，虽然官方举例用来插入和删除节点，但是我可以把点击事件变成悬浮事件显示节点文本全内容啊。

然后选用scoped slot插入的时候发现：

最后终于结束了这个问题。

代码：

使用el-tree组件如下：

<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>

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

.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

补充说明：

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

.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

因为我用element ui的el-tree组件，span的外层样式默认为display: flex; 则无需设置span的display属性即可。