JavaScript vue + element 前端分页方法

element 分页组件（不分页）

<template>
    <el-pagination
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        :popper-class="poperClassString"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
    />
</template>

<script>
export default {
    name: 'CePagination',
    data() {
        return {
            currentValue: this.value,
        };
    },
    props: {
        total: {
            required: true,
            type: Number,
        },
        page: {
            type: Number,
            default: 1,
        },
        limit: {
            type: Number,
            default: 20,
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30, 50];
            },
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper',
        },
        background: {
            type: Boolean,
            default: true,
        },
        autoScroll: {
            type: Boolean,
            default: true,
        },
        hidden: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        poperClassString: function () {
            return 'ceis-pagination-popper';
        },
        currentPage: {
            get() {
                return this.page;
            },
            set(val) {
                this.$emit('update:page', val);
            },
        },
        pageSize: {
            get() {
                return this.limit;
            },
            set(val) {
                this.$emit('update:limit', val);
            },
        },
    },
    methods: {
        handleSizeChange(val) {
            this.$emit('change', {page: this.currentPage, limit: val});
        },
        handleCurrentChange(val) {
            this.$emit('change', {page: val, limit: this.pageSize});
        },
        handlePrevClick(val) {
            this.$emit('prev-click', {page: val, limit: this.pageSize});
        },
        handleNextClick(val) {
            this.$emit('next-click', {page: val, limit: this.pageSize});
        },
    },
};
</script>
<style lang="scss">
</style>

分页方法组件

<template>
    <ce-pagination
        :limit="pageSize"
        :total="totalCount"
        :page="page"
        @change="paginationChange"
    />
</template>

<script>
import CePagination from '@/components/CePagination';

export default {
    name: 'CePaginationFe',
    components: {
        CePagination,
    },
    data() {
        return {
            page: 1,
            pageSize: 10,
            totalCount: 10,
            tableData: [],
        };
    },
    mounted() {},
    watch: {
        tableData(nVal, oVal) {
            console.log(nVal);
            if (nVal) {
                this.paginationChange();
            }
        },
    },
    methods: {
        init(data) {
            this.tableData = data;
        },
        paginationChange(value) {
            if (value) {
                this.page = value.page;
                this.pageSize = value.limit;
                console.log(value);
            }
            this.totalCount = this.tableData.length;
            let pageStart = this.page; // 截取的开始索引
            if (this.page !== 1) {
                pageStart = (this.page - 1) * this.pageSize; // 比如点击是2，并且pageSize是10的时候 那么数据下标是 10开始就是10
                console.log(pageStart, 'if');
            }
            else {
                pageStart = 0;
            }
            let number = this.tableData.length;
            // 当点击2的时候如果第二页是最后一页进入else全部展示
            let tableDataView = [];
            if (number > pageStart + this.pageSize) {
                tableDataView = this.tableData.slice(pageStart, pageStart + this.pageSize);
            }
            else {
                tableDataView = this.tableData.slice(pageStart, this.tableData.length);
            }
            if (tableDataView.length <= 0) {
                this.page = 1;
                this.pageSize = 10;
                tableDataView = this.tableData.slice(0, 10);
            }
            this.$emit('pageViewData', tableDataView);
        },

    },
};
</script>

<style lang="scss" scoped>
</style>

 父组件 调用 分页组件的 方法

<template>
    <div>
        <table
           :data="tableData"
           border
           style="width: 100%"
           size="small"
           @selection-change="handleSelectionChange"
        >
            <el-table-column
                 v-for="item in model.itemColumn"             
                 :key="item.assetCode"
                 :prop="item.prop"
                 :label="item.label"
                 :min-width="item.width"
            />
        </table>
        <div v-show="tableData && tableData.length !== 0" >
              <ce-pagination-fe
                ref="cePaginationFe"
                @pageViewData="paginationChange"
               />
         </div>
    </div>
</template>

<script>
import CePaginationFe from '@/components/CePaginationFe';

export default {
    name: '',
    data() {
        return {
            tableData: [], // 分页后的数据
            tableView: [{
    assetCode: '600734',
    assetName: '蒸羊羔儿',
    createTime: '',
    remark: '',
}, {
    assetCode: '600735',
    assetName: '蒸熊掌',
    createTime: '',
    remark: '',
}, {
    assetCode: '600736',
    assetName: '蒸鹿尾儿',
    createTime: '',
    remark: '',
}, {
    assetCode: '600737',
    assetName: '烧花鸭',
    createTime: '',
    remark: '',
}, {
    assetCode: '600738',
    assetName: '烧雏鸡',
    createTime: '',
    remark: '',
}, {
    assetCode: '600739',
    assetName: '烧子鹅',
    createTime: '',
    remark: '',
}, {
    assetCode: '600740',
    assetName: '炉猪',
    createTime: '',
    remark: '',
}, {
    assetCode: '600741',
    assetName: '炉鸭',
    createTime: '',
    remark: '',
}, {
    assetCode: '600742',
    assetName: '炉猪',
    createTime: '',
    remark: '',
}, {
    assetCode: '600743',
    assetName: '酱鸡',
    createTime: '',
    remark: '',
}, {
    assetCode: '600744',
    assetName: '腊肉',
    createTime: '',
    remark: '',
}, {
    assetCode: '600745',
    assetName: '松花小肚儿',
    createTime: '',
    remark: '',
}, {
    assetCode: '600746',
    assetName: '晾肉',
    createTime: '',
    remark: '',
}, {
    assetCode: '600747',
    assetName: '香肠儿',
    createTime: '',
    remark: '',
}, {
    assetCode: '600748',
    assetName: '什锦苏盘儿',
    createTime: '',
    remark: '',
}];
        };
    },
    components: {
        CePaginationFe,
    },
    created() {
    },
    mounted() {},
    methods: {
        init() {
            this.$refs.cePaginationFe.init(this.tableView);
        },
        // fe分页列表回显
        paginationChange(data) {
            this.tableData = data;
        },
    },
};
</script>

<style lang="scss" scoped>
</style>