饿了么树形组件横向滚动条问题

项目里面用到了饿了么的el-tree,但是给el-tree包裹div时,如果父级宽度设置比节点宽度小,不会出现横向滚动条。

然后去github上面搜了一下,还又不少人遇到这样的问题,把代码放出来

HTML结构:

<div class="tree">
  <el-tree></el-tree>
</div>

CSS样式:

.tree{
  overflow: auto;
  max-height:450px;
}
.el-tree {  
  min-width: 100%;  
  display: inline-block;  
}  

2019-02-28补充:
做完上面的,滚动条是可以出来了,但是还是希望鼠标划到节点上显示完整的名称(加上title属性)。

el-tree是有自定义节点内容,既然这样就可以自定义节点来加title属性。

<el-tree ref="tree" @node-click="nodeClick" :expand-on-click-node="false" :default-expand-all="true" :data="xmhfTreeNodes" node-key="id" :props="defaultProps">
  <span slot-scope="{ node, data }">
    <span class="el-tree-node__label"  :title="node.label">{{ node.label }}</span>
  </span>
</el-tree>

2019-02-28T00:38:48.png

标签: CSS, VUE

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

添加新评论