Vue ElementUI el-scrollbar 嵌套 el-tree 出现适宜横向纵向滚动条的方案

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;
				}
			}
		}
	}