vue页面

 <div style="height: 400px">
            <el-scrollbar style="height: 100%">
              <el-tree
                ref="tree"
                :data="list"
                node-key="id"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :default-expanded-keys="defaultexpanded"
              ></el-tree>
            </el-scrollbar>
          </div>

CSS

<style>
.el-tree>.el-tree-node{
  height: 350px; 
  min-width: 100%;
  display:inline-block;
}
</style>

实现效果：

Vue页面<template lang="html"></template>里部分相关代码。

示例代码：

<div id="listTree" class="list-tree-div">
	<el-scrollbar >
		<el-tree class="filter-tree no-select" :indent="10" :data="data" node-key="id" ref="tree">
		</el-tree>
	</el-scrollbar >
</div>

Vue页面<style lang="scss"></style>里部分相关代码。

示例代码：

    .list-tree-div {
		width: 232px;
		overflow: auto;
		background: none;
		flex-grow: 1;
		display: flex;
		.el-scrollbar {
			display: flex;
			padding: 2.6px 16px 16px 0;
			width: 232px;
			.el-scrollbar__wrap {
				overflow-x: hidden;
				overflow-y: auto;
				min-width: 250px;
				.el-tree.filter-tree {
					.el-tree-node{
						> .el-tree-node__content{
							/* 让纵向滚动条与内容最右边界限之间留有8px的宽度，使效果更好看。 */
							padding: 0 8px 0 0;
							.el-tree-node__expand-icon{
								margin:-2 0 0 3px;
								padding: 0;
							}
							> label.el-checkbox{
								margin-right: 4px;
								margin-bottom: 0px;
								font-size: 12px;
							}
							.el-tree-node__label {
								font-size: 12px;
								line-height: 12px;
							}
						}
						
						.el-tree-node__children{
							/* 出现横轴滚动条 */
							display: inline-block;
							min-width: 100%;
						}
						
					}
				}
 
			}
			.el-scrollbar__bar {
				&.is-horizontal{
					bottom:0;
				}
				&.is-vertical{
					right:0;
				}
			}
		}
	}

1.普通添加滚动条

<!-- html -->
<div class="box">
  <el-scrollbar>
    <div v-for="item in 100">{{item}}</div>
  </el-scrollbar>
</div>

// css
.box{
  height: 200px;             // 最外层要设置盖度，才能限制它出滚动条呀
}
.el-scrollbar{
  height: 100%;              // el-scrollbar要有高度哦
}
.el-scrollbar__wrap{         // 用于隐藏横向滚动条
  overflow-x: hidden;
}

2.element-ui表格中使用滚动条，但是要固定表头，如果直接加入会发现样式上的问题，如下：

<div class="box">
 <el-scrollbar style="height:100%">
   <el-table height="200px">       // 大家都知道，如果想要表头固定高度，需要给他高度
     .....
   </el-table>
 </el-scrollbar>
</div>

样式上的解决

// 滚动条的宽度
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
  // 滚动条的滑块
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
.gutter{
  background-color: rgb(232, 232, 232);   // 这里是填充上未被填充的右侧表头空白
}
.el-table__body{
  width: 100% !important;        // 这里一定要!important哦，来覆盖掉之前的宽度
}