参数说明:
pageSize:每页显示多少条
pageCount:总共多少页
pageIndex:当前是第几页(这里是从0开发)
<template> <div> <el-table :data="traceTableList" class="border-all table-components-content" border style=" 100%;height:100%;"> <el-table-column v-for="(headEle, index) in headerTraceTableList" :key="index" :prop="headEle.prop" :label="headEle.label" :width="headEle.width" :min-width="headEle.minWidth"> <template slot-scope="scope"> <!-- :class="{'text-warn': scope.row[headEle.prop]<0 }" --> <span :class="{'text-danger': (headEle.isWarning && scope.row[headEle.prop]) < 0}">{{ scope.row[headEle.prop] }}</span> </template> </el-table-column> </el-table> <div v-if="showPage" class="page-container margin-t-10"> <el-button type="primary" size="mini" icon="el-icon-arrow-left" :disabled="pageIndex===0" @click="handleLeftPage" /> <span class="text-color-3">{{ pageIndex + 1 }}</span> <el-button type="primary" size="mini" icon="el-icon-arrow-right" :disabled="pageIndex < pageInfo.pageCount" @click="handleRightPage" /> </div> </div> </template> <script> export default { name: 'TraceTable', props: { headerTraceTableList: { type: Array, default: function () { return [] } }, traceTableList: { type: Array, default: function () { return [] } }, showPage: { type: Boolean, default: false }, pageInfo: { type: Object, default: function () { return { pageCount: 0, pageSize: 20 } } } }, data () { return { pageIndex: 0 } }, methods: { handleLeftPage () { this.pageIndex-- this.$emit('turnPage', { pageIndex: this.pageIndex, pageSize: this.pageInfo.pageSize }) }, // 右分页 handleRightPage () { this.pageIndex++ this.$emit('turnPage', { pageIndex: this.pageIndex, pageSize: this.pageInfo.pageSize }) } } } </script> <style scoped> .page-container > span { width: 35px; height: 28px; display: inline-block; text-align: center; } </style>