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

elementUI用到tree 树形组件时碰到tree节点过多需要横向滚动显示但是组件文档上没有上没有正常显示具体解决方案请往下看。如图所示需要显示纵向和横向滚动条:1、在tree外包一层div,并设置父元素的高这样才不会出现横向滚动条在树的最低端需要滚动竖向滚动条才能看到。2、定义tree的样式 tree-container3、【可选】重写tree样式这个可以全局或是使用v-deep4、【可选】防止树多出了莫名的高度设置以下属性::v-deep{.el-tree-node .el-tree-node__children {overflow: visible;}}5、具体实现代码template div classtree-container el-tree classel-tree-custom :datadataTree :propstreeProps :expand-on-click-nodefalse :filter-node-methodfilterNode reftree node-keyid default-expand-all highlight-current node-clickhandleNodeClick / /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 langscss .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; }