zoukankan      html  css  js  c++  java
  • element表格上下固定,内容高度自适应

    需求:element的表格内容只有一行或者没有数据时候,分页也始终在最底部,头部固定,中间内容高度随不同屏幕自适应

    1、动态计算高度

    2、设置高度100% + calc进行适配

    这里先说下第二种方式

    <div class="content sm-bg">
                <div class="same-head">
                    <el-button type="success" size="mini" @click="hadnleAdd">登记负面清单</el-button>
                </div>
                <div class="same-table">
                    <el-table
                        :data="tableData"
                        class="oneTabel"
                        ref="table"
                        border
                        fit
                        :header-row-style="{height:'38px'}"
                        style="100%;"
                        height="100%">
                            <el-table-column prop="orderNum" label="序号" width="80"></el-table-column>
                            <el-table-column prop="name" label="机构"></el-table-column>
                            <el-table-column prop="negativeDec" label="负面清单描述"></el-table-column>
                            <el-table-column prop="createUserCaption" label="登记人"></el-table-column>
                            <el-table-column prop="bulletinTime" label="登记时间">
                                <template slot-scope="scope">
                                    <p v-if="scope.row.bulletinTime!= null">{{scope.row.bulletinTime | formatDate}}</p>
                                    <p v-else></p>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120" fixed="right">
                                <template slot-scope="scope">
                                   <i class="el-icon-edit"  @click="handleUpdate(scope.row)"></i>
                                   <i class="el-icon-delete" @click="handleDel(scope.row)"></i>
                                </template>
                            </el-table-column>
                    </el-table>
                </div>
                <div class="pag_title">
                    <el-pagination
                        class="page_pub"
                        :page-size="querySearch.size"
                        :page-sizes="[10, 20, 50, 100]"
                        @size-change="handleSizeChange"
                        @current-change="tablePageChange"
                        layout="total, sizes, prev, pager, next, jumper"
                        :current-page.sync="page"
                        :total="totals">
                    </el-pagination>
                </div>
            </div>
    

      

       .content {
            height: 80%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            flex-direction: column;
            position: relative;
            .same-table{
                height: calc(100% - 55px);
                position: relative;
            }
            .pag_title{
                position: fixed;
                bottom: 27px;
                 80%;
                text-align: center;
            }
        }
    

      

  • 相关阅读:
    Balanced Binary Tree
    Swap Nodes in Pairs
    Reverse Nodes in k-Group
    Reverse Linked List II
    Remove Nth Node From End of List
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Partition List
    Merge Two Sorted Lists
    【Yii2.0】1.2 Apache检查配置文件语法
  • 原文地址:https://www.cnblogs.com/theblogs/p/13897351.html
Copyright © 2011-2022 走看看