Element: [Bug Report] tree text too long or too many nodes, can not be horizontal scrolling

[vu-ji]

Element UI version

1.2.9

OS/Browsers version

windows7

Vue version

2.2.6

Reproduction Link

https://jsfiddle.net/vuji/pj71jkyw/137/

Steps to reproduce

tree中 label 过长或者 children 层级过多

What is Expected?

能够横向滚动显示

What is actually happening?

无法横向滚动显示

[element-bot]

为了让更多的人能够理解你的问题，同时给遇到相同问题的人提供更好的参考，请尽量使用英语提交你的 issue。相关信息：#4396。

[element-bot]

Translation of this issue:

Element UI version

1.2.9

OS/Browsers version

Windows7

Vue version

2.2.6

Reproduction Link

https://jsfiddle.net/vuji/pj71jkyw/137/

Steps to reproduce

Tree in label is too long or children level too much

What is Expected?

Horizontal scrolling display

What is actually happening?

Horizontal scrolling display

[linfanboss]

加入样式
.el-tree-node>.el-tree-node__children {
overflow: inherit;
background-color: transparent;
}
覆盖默认的样式就可以出现横向滚动条

[zimplexing]

@linfanboss 样式这样设置之后是可以出现滚动条了，但是还有一个小问题，hover和标记当前选中节点时的范围还是父容器的宽度

[linfanboss]

@zimplexing 确实是有这个问题，暂时还没解决

[zimplexing]

@linfanboss 如果纯展示用，就没什么问题~

[bofortitude]

@linfanboss @zimplexing hover和标记时宽度不对的问题困扰我好久，我想了各种办法都没法越过去，有什么好的主意能workaround的吗，太感谢了~！

[linfanboss]

@bofortitude @zimplexing 关于hover和标记时宽度不对的问题，我刚刚抽空看了一下，有一个办法可以试试看是否可行。就是在渲染完树形后出现横向滚动条，这个整个的宽度是可以计算出来的（类似这样document.getElementsByClassName('fileBd')[0].scrollWidth），然后，我想了想，还是截个图比较容易理解，于是我就不废话了，看图。。。（其实就是把宽度计算出来动态设置给整个树形宽度就可以了我是这么觉得的）

[bofortitude]

@linfanboss 非常感谢您给的方法，我在发贴求助前倒是想到这么弄，所以也试了下，但是没有成功。原因是如果把整个树的宽度设置更大之后，由于滚动条增大了，所以即便我收起长的item，只剩下短的，但是由于这个宽度够，所以这个滚动条就不会再变小了。导致只能越来越大，不能变小。我也试了下在渲染函数里面给每个item一个id，然后在外面get到渲染后的item，求出其宽度值，但是问题还是类似的，由于滚动条变大了，所以就不再变小。。

[bofortitude]

@linfanboss 我又想了个办法解决我说的问题，就是每次触发重新设置tree的width时，先把tree的width设置成100%，这样滚动条就会重新计算一遍，得出当前应该的值，这时再去获取然后设置到tree的width上。但是触发时间点是个问题，比如node collapse时如果立刻这么做，由于收齐动画有时间间隔，所以立刻获取到的还是之前的值，所以我又在这个event中用setTimeout延迟了一点时间再执行。。。

这个真是绕死我了，为了解决一个小问题，绕了这么远。

Anyway, 非常感谢您的回复，受益匪浅。

[linfanboss]

确实有你说的那个问题，然后你说的解决方案刚刚试了是可行的，需要动态改变树的宽度，改变之前需要重置为100%宽度，延时的话我给了500ms，我当初也是觉得花时间去搞这个有点恶心，所以就放那没去管，这次也算是互相探讨中学习了。

[xinyii]

hover的宽度可以这样解决，white-space为nowrap的时候，inline-block宽度会被撑大

.el-tree-node>.el-tree-node__children {
  overflow: inherit;
}

.el-tree-node__content {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
  line-height: 26px;
}

.el-tree-node {
  display: inline-block;
  white-space: normal;
  min-width: 100%;
}

[jKatherine]

完美解决树横向滚动条问题