element纯前端table分页

 

<template>
    <div class="boxs">
        <div class="close" @click="closeShow()"><img src="./image/close.png"></div>
        <div class="title">一舟储能峰谷收益统计数据</div>
        <div class="box">
            <div style="position: relative;width: 100%;height: 100%;">
                <el-table border :data="tableData.slice(startIndex, endIndex)" style="width: 100%">
                    <el-table-column width="100" prop="data1" label="统计时间">
                    </el-table-column>
                    <el-table-column prop="data2" label="储能输入电量">
                    </el-table-column>
                    <el-table-column prop="data3" label="储能输入成本">
                    </el-table-column>
                    <el-table-column prop="data4" label="储能输入电量">
                    </el-table-column>
                    <el-table-column prop="data5" label="储能输出收益">
                    </el-table-column>
                    <el-table-column prop="data6" label="充电次数">
                    </el-table-column>
                    <el-table-column prop="data7" label="放电次数">
                    </el-table-column>
                    <el-table-column prop="data8" label="尖充电量">
                    </el-table-column>
                    <el-table-column prop="data9" label="峰充电量">
                    </el-table-column>
                    <el-table-column prop="data10" label="平充电量">
                    </el-table-column>
                    <el-table-column prop="data11" label="谷充电量">
                    </el-table-column>
                    <el-table-column prop="data12" label="尖放电量">
                    </el-table-column>
                    <el-table-column prop="data13" label="峰放电量">
                    </el-table-column>
                    <el-table-column prop="data14" label="平放电量">
                    </el-table-column>
                    <el-table-column prop="data15" label="谷放电量">
                    </el-table-column>
                    <el-table-column prop="data16" label="电池峰谷价差收益">
                    </el-table-column>
                </el-table>
                <el-pagination style="position: absolute;left: 50%;transform: translateX(-50%);bottom: 20px;" background
                    layout="prev, pager, next" :total="tableData.length" :page-size="pageSize"
                    @current-change="handlePageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            tableData: [],   //表格数据
            currentPage: 1,  //正在第几页
            pageSize: 12,    //每页数量
            totalDataCount: 0 //总页码数
        }
    },
    components: {

    },
    methods: {
        closeShow() {
            this.$emit('showClose2');
        },
        getData() {
            var tableData = [];
            for (var i = 0; i < 200; i++) {
                var data = {
                    data1: '202308' + (i + 1).toString().padStart(2, '0'),
                    data2: (Math.random() * 100).toFixed(1),
                    data3: (Math.random() * 30).toFixed(2),
                    data4: (Math.random() * 60).toFixed(1),
                    data5: (Math.random() * 20).toFixed(2),
                    data6: (Math.random() * 1).toFixed(1),
                    data7: (Math.random() * 1).toFixed(1),
                    data8: (Math.random() * 1).toFixed(1),
                    data9: (Math.random() * 1).toFixed(1),
                    data10: (Math.random() * 1).toFixed(1),
                    data11: (Math.random() * 100).toFixed(1),
                    data12: (Math.random() * 1).toFixed(1),
                    data13: (Math.random() * 20).toFixed(1),
                    data14: (Math.random() * 40).toFixed(1),
                    data15: (Math.random() * 1).toFixed(1),
                    data16: (Math.random() * -10).toFixed(2)
                };
                tableData.push(data);
            }
            this.tableData = tableData;
            this.totalDataCount = Math.ceil(this.tableData.length / this.pageSize);
        },
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
        }
    },
    computed: {
        startIndex() {
            return (this.currentPage - 1) * this.pageSize;
        },
        endIndex() {
            return this.currentPage * this.pageSize;
        }
    },
    mounted() {
        this.getData()
    },
}
</script>

<style scoped lang="less">
.close {
    cursor: pointer;
    position: absolute;
    right: -18px;
    top: -20px;
    z-index: 9999;
}

@font-face {
    font-family: 'digifaw';
    src: url('../../font/digifaw.ttf') format('woff2'),
        url('../../font/digifaw.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}

.digifaw {
    font-family: digifaw !important;
    font-size: 28px !important;
}

.boxs {
    position: absolute;
    z-index: 999;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1364.5px;
    height: 842px;
    background: url("../../images/tjTable.png");
    background-size: contain;
}

.title {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: left;
    left: 44%;
    transform: translateX(-50%);
    width: 77.3%;
    height: 55px;
    top: 23px;
    color: #fff;
    font-size: 16px;
}

.box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: green;
    width: 95.3%;
    height: 86%;
    top: 94px;
    overflow-y: auto;
}
</style>