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