style: 超过 20 条无滑动条

develop
时启龙 2024-11-19 16:30:19 +08:00
parent 1826e920df
commit fff8e458d3
2 changed files with 19 additions and 15 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="side-menu"> <div class="side-menu">
<el-input placeholder="输入关键字进行过滤" v-model="filterText" class="m-b" clearable> </el-input> <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="m-b" clearable> </el-input>
<el-scrollbar class="custom-scrollbar" style="height: calc(100% - 50px)"> <el-scrollbar class="custom-scrollbar" style="height: calc(100% - 130px)">
<el-tree class="tree" highlight-current node-key="id" :load="loadNode" @node-click="handleNodeClick" lazy :props="{ label: 'name', children: 'childrenGroups', isLeaf: isLeaf }" :filter-node-method="filterNode" ref="treeRef"> <el-tree class="tree" highlight-current node-key="id" :load="loadNode" @node-click="handleNodeClick" lazy :props="{ label: 'name', children: 'childrenGroups', isLeaf: isLeaf }" :filter-node-method="filterNode" ref="treeRef">
<span class="custom-tree-node" slot-scope="{ node, data }"> <span class="custom-tree-node" slot-scope="{ node, data }">
<div class="custom-tree-node-wrapper"> <div class="custom-tree-node-wrapper">
@ -107,7 +107,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.side-menu { .side-menu {
height: calc(100vh - 140px); height: 100%;
background: #fff; background: #fff;
padding: 15px; padding: 15px;
} }

View File

@ -1,8 +1,7 @@
<template> <template>
<div> <div class="wrapper">
<AmsPosition></AmsPosition> <AmsPosition></AmsPosition>
<div class="warpper"> <split-pane :min-percent="10" :default-percent="15" split="vertical">
<split-pane :min-percent="10" :default-percent="15" split="vertical" style="height: calc(100vh - 110px)">
<template slot="paneL"> <template slot="paneL">
<SideMenu @handleNodeClick="handleNodeClick" v-if="switchControl"></SideMenu> <SideMenu @handleNodeClick="handleNodeClick" v-if="switchControl"></SideMenu>
</template> </template>
@ -11,7 +10,6 @@
</template> </template>
</split-pane> </split-pane>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, unref } from 'vue' import { defineComponent, ref, unref } from 'vue'
@ -47,9 +45,15 @@ export default defineComponent({
}, },
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warpper { .wrapper {
height: calc(100vh);
background-color: #fff; background-color: #fff;
} }
::v-deep .vue-splitter-container {
display: flex !important;
.splitter-pane {
position: relative !important;
}
}
</style> </style>