sis_zhfx/src/components/coms/table/table-page.vue

<template>
    <div class="table-page">
        <div class="toolbar">
            <div class="title" v-if="grid.title.show">
                <i :class="grid.title.icon"></i>
                <span>{{grid.title.text}}</span>
            </div>
            <div class="page-bar">
                <span class="btn" @click="firstPage()">首页</span>
                <span class="btn" @click="prevPage()">上一页</span>
                <span v-for="(bar, index) of pageBar" :key="index" @click="gotoPage(bar)"
                    :class="bar.type + ' ' + (bar.type != 'dot' && page == bar.text ? 'active' : '')">{{bar.text}}</span>
                <span class="btn" @click="nextPage()">下一页</span>
                <span class="btn" @click="lastPage()">尾页</span>
            </div>
            <div class="page-num">
                <span>共</span>
                <span>{{pages}}</span>
                <span>页</span>
                <span class="total">{{grid.data.total}}</span>
                <span>条数据</span>
            </div>
            <div class="return" v-if="showReturn" @click="onReturn">
                返回
            </div>
        </div>
        <div class="sub-title" v-if="grid.subTitle.show">
            <div class="text">{{grid.subTitle.text}}</div>
            <div class="sub-text">{{grid.subTitle.subText}}</div>
        </div>
        <div class="ct">
            <table class="com-table">
                <thead>
                    <tr>
                        <th v-for="(col, index) of grid.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(row, index) of data" :key="index">
                        <td v-for="(col, i) of grid.column" :key="i" :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num }">
                            {{row[col.field]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</template>

<script>
    export default {
        // 名称
        name: "ComTable",
        // 使用组件
        components: {},
        // 传入参数
        props: {
            grid: Object,
            showReturn: Boolean
        },
        // 自定义事件
        emits: {
            onReturn: null,
        },
        // 数据
        data() {
            return {
                pages: 0,
                page: 1,
                pageBar: [],
                data: []
            }
        },
        // 函数
        methods: {
            createPageBar: function() {
                let pb = [];
                const p = this.page;
                const ps = this.pages;
                if (p >= 4) {
                    pb.push({
                        type: "dot",
                        text: "...",
                    })
                }
                for (let i = p - 2; i <= p + 2 && i <= ps; i++) {
                    if (i <= 0) {
                        continue;
                    }
                    pb.push({
                        type: "btn num",
                        text: i,
                    })
                }
                if (ps > p + 2) {
                    pb.push({
                        type: "dot",
                        text: "...",
                    })
                }
                this.pageBar = pb;
            },
            createData: function () {
                let d = [];
                let p = this.page;
                let l = this.grid.limit;
                let t = this.grid.data.list.length;
                for (let i = l * (p - 1); i < l * (p - 1) + l && i < t; i++) {
                    d.push(this.grid.data.list[i]);
                }
                this.data = d;
            },
            gotoPage: function(item) {
                if (item.type != 'dot') {
                    this.page = item.text;
                    this.createPageBar();
                    this.createData();
                }
            },
            prevPage: function() {
                let p = this.page - 1;
                if (p > 0) {
                    this.page = p;
                    this.createPageBar();
                    this.createData();
                }
            },
            nextPage: function() {
                let p = this.page + 1;
                if (p <= this.pages) {
                    this.page = p;
                    this.createPageBar();
                    this.createData();
                }
            },
            firstPage: function() {
                this.page = 1;
                this.createPageBar();
                this.createData();
            },
            lastPage: function() {
                this.page = this.pages;
                this.createPageBar();
                this.createData();
            },
            onReturn: function() {
                this.$emit('onReturn');
            }
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
            this.pages = Math.ceil(this.grid.data.list.length / this.grid.limit);
            this.createPageBar();
            this.createData();
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    }
</script>

<style lang="less">
    @titleGray: #9CA5A8;
    @rowGray: #606769;
    @darkBack: #536268;

    .table-page {
        display: flex;
        flex-direction: column;
        
        .toolbar {
            background-color: fade(@darkgray, 40%);
            display: flex;

            .title {
                padding: 0.741vh 0;
                color: @green;
                font-size: @fontsize;

                i {
                    margin: 0 0.556vh 0 1.481vh;
                }
            }

            .page-bar {
                margin-left: auto;
                font-size: @fontsize;
                color: @gray;
                display: flex;
                align-items: center;

                span {
                    border-radius: 0.370vh;
                    padding: 0.185vh 0.278vh;
                    margin-right: 0.556vh;

                    &.btn {
                        cursor: pointer;

                        &:hover {
                            color: @green;
                            border-color: @green;
                        }
                    }

                }

                .num {
                    font-weight: 600;
                    width: 2.315vh;
                    text-align: center;
                    border: 0.093vh solid @darkgray;

                    &.active {
                        color: @green;
                        border-color: @green;
                    }
                }

            }

            .page-num {
                margin-left: 1.481vh;
                margin-right: 1.481vh;
                font-size: @fontsize;
                color: @gray;
                display: flex;
                align-items: center;

                .total {
                    margin-left: 0.741vh;
                }
            }

            .return {
                margin-right: 1.481vh;
                font-size: @fontsize;
                color: @gray;
                display: flex;
                align-items: center;
                cursor: pointer;

                &:hover {
                    color: @green;
                }
            }
        }

        .sub-title {
            background-color: fade(@darkgray, 40%);
            display: flex;
            padding: 0.741vh 2.222vh;
            font-size: @fontsize;
            margin-top: 1.481vh;

            .text {
                color: @write;
            }

            .sub-text {
                margin-left: auto;
                color: @write;
            }
        }
        
        .ct {
            flex-grow: 1;
            overflow: auto;
        }
        
        .com-table {
            width: 100%;
            border-collapse: collapse;
        
            thead {
                tr {
                    th {
                        background-color: fade(@darkBack, 60%);
                        padding: 0.556vh 0;
                        color: @titleGray;
                        font-weight: 400;
                        font-size: @fontsize-s;
                        position: sticky;
                        top: 0;
                        
                        &.light {
                            color: @green;
                        }
                    }
                }
            }
        
            tbody {
                tr {
                    &:nth-child(2n) {
                        background-color: fade(@rowGray, 20%);
                    }
        
                    td {
                        padding: 0.556vh 0;
                        color: @rowGray;
                        text-align: center;
                        font-size: @fontsize-s;
                        
                        &.light {
                            color: @green;
                        }
                        
                        &.num {
                            font-family: "Bicubik";
                            font-weight: 400;
                        }
                    }
                }
            }
        }
        
    }
</style>