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>
    
  • 相关阅读:
    asp.net -mvc框架复习(6)-基于MVC实现简单计算器
    asp.net -mvc框架复习(5)-ASP.NET MVC中的视图简单使用
    asp.net -mvc框架复习(4)-ASP.NET MVC中的约定规则
    asp.net -mvc框架复习(3)-控制器和动作方法的任务分析
    asp.net -mvc框架复习(2)-创建ASP.NET MVC 第一个程序以及MVC项目文件夹说明
    中心项目-网络连接示意图
    asp.net -mvc框架复习(1)-ASP.NET网站开发概述
    复习总结正则表达式-下
    复习总结正则表达式-上
    Http如何利用304让浏览器去更新数据
  • 原文地址:https://www.cnblogs.com/wanggang2016/p/10097367.html
Copyright © 2011-2022 走看看