2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > Vue ElementUI el-scrollbar 嵌套 el-tree 出现适宜横向纵向滚动条的方案

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

时间:2023-03-20 22:01:08

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。