样式调整笔记
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="width: 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>

浙公网安备 33010602011771号