element-ui 2 el-tree 内容超长滚动条不显示问题

elementUI用到tree 树形组件时碰到tree节点过多需要横向滚动显示，但是组件文档上没有上没有正常显示，具体解决方案请往下看。

如图所示，需要显示纵向和横向滚动条:

1、在tree外包一层div,并设置父元素的高，这样才不会出现横向滚动条在树的最低端，需要滚动竖向滚动条才能看到。

2、定义tree的样式 "tree-container"

3、**【可选】**重写tree样式（这个可以全局或是使用v-deep）

4、**【可选】**防止树多出了莫名的高度设置以下属性

::v-deep{

.el-tree-node > .el-tree-node__children {

overflow: visible;

}

}

5、具体实现代码

<template>
<div class="tree-container">
<el-tree
      class="el-tree-custom"
      :data="dataTree"
      :props="treeProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
      node-key="id"
      default-expand-all
      highlight-current
      @node-click="handleNodeClick"
  />
</div>
</template>

<script>
export default{
    data(){
        return{
    dataTree: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1',
               children: [{
                label: '四级 4-1-1'
            }],
            label: '三级 100003-1000001-1011111',
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1',
               children: [{
                label: '四级 4-1-1'
            }],
            label: '三级 100003-1000001-1011111',
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1',
               children: [{
                label: '四级 4-1-1'
            }],
            label: '三级 100003-1000001-1011111',
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1',
               children: [{
                label: '四级 4-1-1'
            }],
            label: '三级 100003-1000001-1011111',
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1',
               children: [{
                label: '四级 4-1-1'
            }],
            label: '三级 100003-1000001-1011111',
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1',
               children: [{
                label: '四级 4-1-1'
            }],
            label: '三级 100003-1000001-1011111',
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],

        treeProps:{
          children: 'children',
          label: 'label'
        }
        }
    }
}
</script>

<style scoped lang="scss">
.tree-container {
  /*显示父容器滚动条*/
  overflow-x: auto;
  /*显示父容器滚动条*/
  max-height: 700px;
   /*显示父容器滚动条*/
  .el-tree-custom {
    display: inline-block;
    /* 防止换行 */
    white-space: nowrap;
    /* 防止换行 */
    overflow-x: auto;
  }
}
</style>

这里如果使用v-deep 修改样式，横向滚动条可能不会固定到底部分，如

 /*(1)*/
 ::v-deep .el-tree-node.is-expanded > .el-tree-node__children {
    display: inline;
 }
 /**(2)*/
::v-deep .el-tree-node > .el-tree-node__content {
  display: block !important;
}
/*(3)*/
::v-deep .el-tree-node > .el-tree-node__children {
  overflow: visible;
}
/*(4)*/
::v-deep .el-tree > .el-tree-node{
  min-width:100%;
  display: inline-block;
}