目的: 当前屏幕展示 滚动条在table里 滚动不会影响筛选项和分页

image.png

组件封装

<!-- 筛选项+表格+分页 布局 -->
<template>
    <el-container class="qm-table">
        <!-- 这块包裹serchForm筛选条件 -->
        <el-header class="qm-table-header">
            <slot name="header"></slot>
        </el-header>
        <!-- 这块包裹table和pagenation -->
        <el-main class="qm-table-nopadding">
            <div class="qm-table-content">
                <slot name="table"></slot>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import { Container, Header, Main } from 'element-ui';

export default {
    name: 'QmTableLayout',
    components: {
        elContainer: Container,
        elHeader: Header,
        elMain: Main
    },
};
</script>

<style lang="scss" scoped>
.qm-table {
    height: 100%;
    &-header {
        width: 100%;
        height: auto !important;
    }
    &-nopadding {
        padding: 0;
    }
    &-content {
        width: 100%;
        height: calc(100% - 60px);
    }
}
</style>

组件使用

<template>
    <qm-table-layout>
        <template #header>
            <!-- 搜索 -->
            <el-input />
        </template>
        <template #table>
            <!-- table 列表 -->
            <!-- !!!!!!!!!!!table一定要设置height="100%"!!!!!!!!!!! -->
            <el-table class="mt" height="100%"  size="mini" :data="tableData"  border >
                <el-table-column type="selection"  width="55"></el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handle_size_change"
                @current-change="handle_page_change"
                :current-page.sync="pageData.page"
                :page-size="pageData.page_size"
                layout="total, prev, pager, next"
                :total="parseInt(pageData.count)">
            </el-pagination>
        </template>
    </qm-table-layout>
</template>

<script>
import qmTableLayout from '@/component/qm-table-layout';

export default {
    components: {
        qmTableLayout
    },
};
</script>
<style lang="scss" scoped>

</style>