zoukankan      html  css  js  c++  java
  • 样式调整笔记

    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>
    
  • 相关阅读:
    20145129 《Java程序设计》第4周学习总结
    20145129 《Java程序设计》第3周学习总结
    20145105 《Java程序设计》第2周学习总结
    linux内核分析——扒开系统调用的三层皮
    Linux内核分析——跟踪分析Linux内核的启动过程
    Linux内核分析——操作系统是如何工作的
    LInux内核分析——计算机是如何工作的进行
    期末总结
    信息安全系统设计基础实验五—20135214万子惠20135227黄晓妍
    第十四周学习总结
  • 原文地址:https://www.cnblogs.com/wanggang2016/p/10097367.html
Copyright © 2011-2022 走看看