Vue2.5 結合 Element UI 之 Table 和 Pagination 組件實現分頁功能

// Element UI
import Element from 'element-ui'
// 默認樣式
import 'element-ui/lib/theme-chalk/index.css'

<template>
 <div class="table">
 <!--region 表格-->
 <el-table id="iTable"></el-table>
 <!--endregion-->
 <!--region 分頁-->
 <el-pagination></el-pagination>
 <!--endregion-->
 </div>
<template>

<template>
 <div class="table-page">
 <i-table :list="list" 
 :total="total" 
 :otherHeight="otherHeight"
 @handleSizeChange="handleSizeChange"
 @handleIndexChange="handleIndexChange" @handleSelectionChange="handleSelectionChange"
 :options="options"
 :columns="columns"
 :operates="operates"
 @handleFilter="handleFilter"
 @handelAction="handelAction">
 </i-table>
 </div>
</template>
<script>
 import iTable from '../../components/Table/Index'
 export default {
 components: {iTable},
 data () {
 return {
 total: 0, // table數據總條數
 list: [], // table數據
 otherHeight: 208, // 除了table表格之外的高度，為了做table表格的高度自適應
 page: 1, // 當前頁碼
 limit: 20, // 每頁數量
 options: {
 stripe: true, // 是否為斑馬紋 table
 loading: false, // 是否添加表格loading加載動畫
 highlightCurrentRow: true, // 是否支持當前行高亮顯示
 mutiSelect: true, // 是否支持列表項選中功能
 filter: false, // 是否支持數據過濾功能
 action: false // 是否支持 表格操作功能
 }, // table 的參數
 columns: [
 {
 prop: 'id',
 label: '編號',
 align: 'center',
 width: 60
 },
 {
 prop: 'title',
 label: '標題',
 align: 'center',
 width: 400,
 formatter: (row, column, cellValue) => {
 return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}</span>`
 }
 },
 {
 prop: 'state',
 label: '狀態',
 align: 'center',
 width: '160',
 render: (h, params) => {
 return h('el-tag', {
 props: {type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'} // 組件的props
 }, params.row.state === 0 ? '上架' : params.row.state === 1 ? '下架' : '審核中')
 }
 },
 ……
 ], // 需要展示的列
 operates: {
 width: 200,
 fixed: 'right',
 list: [
 {
 label: '編輯',
 type: 'warning',
 show: true,
 icon: 'el-icon-edit',
 plain: true,
 disabled: true,
 method: (index, row) => {
 this.handleEdit(index, row)
 }
 },
 {
 label: '刪除',
 type: 'danger',
 icon: 'el-icon-delete',
 show: true,
 plain: false,
 disabled: false,
 method: (index, row) => {
 this.handleDel(index, row)
 }
 }
 ]
 } // 列操作按鈕
 }
 },
 methods: {
 // 切換每頁顯示的數量
 handleSizeChange (size) {
 this.limit = size
 console.log(' this.limit:', this.limit)
 },
 // 切換頁碼
 handleIndexChange (index) {
 this.page = index
 console.log(' this.page:', this.page)
 },
 // 選中行
 handleSelectionChange (val) {
 console.log('val:', val)
 },
 // 編輯
 handleEdit (index, row) {
 console.log(' index:', index)
 console.log(' row:', row)
 },
 // 刪除
 handleDel (index, row) {
 console.log(' index:', index)
 console.log(' row:', row)
 }
 }
 }
</script>

<!--region 封裝的分頁 table-->
<template>
 <div class="table">
 <el-table id="iTable" v-loading.iTable="options.loading" :data="list" :max-height="height" :stripe="options.stripe"
 ref="mutipleTable"
 @selection-change="handleSelectionChange">
 <!--region 選擇框-->
 <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
 </el-table-column>
 <!--endregion-->
 <!--region 數據列-->
 <template v-for="(column, index) in columns">
 <el-table-column :prop="column.prop"
 :label="column.label"
 :align="column.align"
 :width="column.width">
 <template slot-scope="scope">
 <template v-if="!column.render">
 <template v-if="column.formatter">
 <span v-html="column.formatter(scope.row, column)"></span>
 </template>
 <template v-else>
 <span>{{scope.row[column.prop]}}</span>
 </template>
 </template>
 <template v-else>
 <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
 </template>
 </template>
 </el-table-column>
 </template>
 <!--endregion-->
 <!--region 按鈕操作組-->
 <el-table-column ref="fixedColumn" label="操作" align="center" :width="operates.width" :fixed="operates.fixed"
 v-if="operates.list.filter(_x=>_x.show === true).length > 0">
 <template slot-scope="scope">
 <div class="operate-group">
 <template v-for="(btn, key) in operates.list">
 <div class="item" v-if="btn.show">
 <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
 :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
 </el-button>
 </div>
 </template>
 </div>
 </template>
 </el-table-column>
 <!--endregion-->
 </el-table>
 <div style="height:12px"></div>
 <!--region 分頁-->
 <el-pagination @size-change="handleSizeChange"
 @current-change="handleIndexChange"
 :page-size="pageSize"
 :page-sizes="[10, 20, 50]" :current-page="pageIndex" layout="total,sizes, prev, pager, next,jumper"
 :total="total"></el-pagination>
 <!--endregion-->
 <!--region 數據篩選-->
 <div class="filter-data fix-right" v-show="options.filter" @click="showfilterDataDialog">
 <span>篩選過濾</span>
 </div>
 <!--endregion-->
 <!--region 表格操作-->
 <div class="table-action fix-right" v-show="options.action" @click="showActionTableDialog">
 <span>表格操作</span>
 </div>
 <!--endregion-->
 </div>
</template>
<!--endregion-->
<script>
 export default {
 props: {
 list: {
 type: Array,
 default: []
 }, // 數據列表
 columns: {
 type: Array,
 default: []
 }, // 需要展示的列 === prop：列數據對應的屬性，label：列名，align：對齊方式，width：列寬
 operates: {
 type: Array,
 default: []
 }, // 操作按鈕組 === label: 文本，type :類型（primary / success / warning / danger / info / text），show：是否顯示，icon：按鈕圖標，plain：是否樸素按鈕，disabled：是否禁用，method：回調方法
 total: {
 type: Number,
 default: 0
 }, // 總數
 pageSize: {
 type: Number,
 default: 20
 }, // 每頁顯示的數量
 otherHeight: {
 type: Number,
 default: 160
 }, // 用來計算表格的高度
 options: {
 type: Object,
 default: {
 stripe: false, // 是否為斑馬紋 table
 highlightCurrentRow: false // 是否要高亮當前行
 },
 filter: false,
 action: false
 } // table 表格的控制參數
 },
 components: {
 expandDom: {
 functional: true,
 props: {
 row: Object,
 render: Function,
 index: Number,
 column: {
 type: Object,
 default: null
 }
 },
 render: (h, ctx) => {
 const params = {
 row: ctx.props.row,
 index: ctx.props.index
 }
 if (ctx.props.column) params.column = ctx.props.column
 return ctx.props.render(h, params)
 }
 }
 },
 data () {
 return {
 pageIndex: 1,
 multipleSelection: [] // 多行選中
 }
 },
 mounted () {
 },
 computed: {
 height () {
 return this.$utils.Common.getWidthHeight().height - this.otherHeight
 }
 },
 methods: {
 // 切換每頁顯示的數量
 handleSizeChange (size) {
 this.$emit('handleSizeChange', size)
 this.pageIndex = 1
 },
 // 切換頁碼
 handleIndexChange (index) {
 this.$emit('handleIndexChange', index)
 this.pageIndex = index
 },
 // 多行選中
 handleSelectionChange (val) {
 this.multipleSelection = val
 this.$emit('handleSelectionChange', val)
 },
 // 顯示 篩選彈窗
 showfilterDataDialog () {
 this.$emit('handleFilter')
 },
 // 顯示 表格操作彈窗
 showActionTableDialog () {
 this.$emit('handelAction')
 }
 }
 }
</script>
<style lang="less" rel="stylesheet/less">
 @import "../../assets/styles/mixins";
 .table {
 height: 100%;
 .el-pagination {
 float: right;
 margin: 20px;
 }
 .el-table__header-wrapper, .el-table__fixed-header-wrapper {
 thead {
 tr {
 th {
 color: #333333;
 }
 }
 }
 }
 .el-table-column--selection .cell {
 padding: 0;
 text-align: center;
 }
 .el-table__fixed-right {
 bottom: 0 !important;
 right: 6px !important;
 z-index: 1004;
 }
 .operate-group {
 display: flex;
 flex-wrap: wrap;
 .item {
 margin-top: 4px;
 margin-bottom: 4px;
 display: block;
 flex: 0 0 50%;
 }
 }
 .filter-data {
 top: e("calc((100% - 100px) / 3)");
 background-color: rgba(0, 0, 0, 0.7);
 }
 .table-action {
 top: e("calc((100% - 100px) / 2)");
 background-color: rgba(0, 0, 0, 0.7);
 }
 .fix-right {
 position: absolute;
 right: 0;
 height: 100px;
 color: #ffffff;
 width: 30px;
 display: block;
 z-index: 1005;
 writing-mode: vertical-rl;
 text-align: center;
 line-height: 28px;
 border-bottom-left-radius: 6px;
 border-top-left-radius: 6px;
 cursor: pointer;
 }
 }
</style>