样式调整笔记

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>

 

posted @ 2018-12-10 16:47  软件开发-汪七北  阅读(232)  评论(0编辑  收藏  举报