1、当布局为左右布局时,左右两侧出现滚动条互相不影响,且不设置固定高度用法
<el-aside width="200px" style="padding:9px;overflow-y:auto;position:absolute;top:40px;bottom:0;left:0;"> <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree :data="menuTree" node-key="id" class="filter-tree" default-expanded-keys="@WindaNet.LIMSAPIGA.Common.Const.ALL_SELECT_ID" v-on:node-click="TreeNodeClick" :expand-on-click-node="false" :filter-node-method="FilterNode" ref="menuTree"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <i class="fa fa-folder-open fa-tree-icon" v-if="isShowIcon"></i>{{ node.label }}</span> </span> </el-tree> </el-aside> <el-main style="padding:5px !important;position:absolute;top:40px;left:200px;right:0;bottom:0;overflow:auto;" > <!-- 搜索区域 + 操作按钮 --> <div class="searchArea"> <el-form :inline="true" :model="search"> <el-form-item label="菜单编码:"> <el-input v-model="search.code"></el-input> </el-form-item> <el-form-item label="菜单名称:"> <el-input v-model="search.name"></el-input> </el-form-item> <el-button v-on:click="SearchMethod" type="primary" icon="el-icon-search">搜索</el-button> <el-button type="primary" icon="el-icon-circle-plus-outline" v-on:click="AddMethod">新增</el-button> <el-button type="success" v-on:click="ModifyMethod" icon="el-icon-edit-outline">编辑</el-button> <el-button type="warning" v-on:click="DeleteMethod" icon="el-icon-circle-close-outline">删除</el-button> </el-form> </div> <!--表格区--> <div class="tableArea"> <el-table ref="multipleTable" border striped :data="tableData" tooltip-effect="dark" style=" 100%" v-on:selection-change="TableSelectHandle"> <el-table-column type="selection" width="40"></el-table-column> <!--用于多选框--> <el-table-column label="菜单编码" prop="code" align="center"></el-table-column> <el-table-column label="菜单名称" prop="name" align="center"></el-table-column> <el-table-column label="显示名称" prop="displayName" align="center"></el-table-column> <el-table-column label="样式" prop="style" align="center"></el-table-column> <el-table-column label="Url" prop="url" align="center"></el-table-column> <el-table-column label="排序" prop="sort" width="55" align="center"></el-table-column> <el-table-column label="创建时间" prop="createTime" :formatter="TimeFormatter" align="center"></el-table-column> </el-table> <div style="text-align:left;padding-top:20px;"> <el-pagination v-on:size-change="PageSizeChange" v-on:current-change="PageIndexChange" :current-page="1" :page-sizes="[10,20,50,100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div> </div> </el-main>