原因：element ui 的表格組件默認是不帶分頁的功能，但是實際工作中表格總是搭配分頁功能一起出現的。封裝在一起使用方便不需要每次都復制粘貼一大堆。

可以根據自己的需求更改，自己根據設計圖定義樣式（目前是超過一頁才顯示分頁）

<template><div class="common-table-paging"><el-tablev-loading="loading"class="common-table"style="width: 100%":data="tableData"v-bind="$attrs"v-on="$listeners"><template v-for="(item, index) in columns"><slot v-if="item.slot" :name="item.slot" /><el-table-columnv-else-if="!item.children":key="index":type="item.type":prop="item.prop":sortable="item.sortable":label="item.label":width="item.width":min-width="item.minWidth"/><el-table-column v-else :key="index" :label="item.label"><el-table-columnv-for="(childItem, childIndex) in item.children":key="'child' + childIndex":prop="childItem.prop":label="childItem.label":width="childItem.width":min-width="childItem.minWidth":formatter="childItem.formatter"/></el-table-column></template><template slot="empty"><slot name="empty" /></template></el-table><div v-if="pagination.total > pagination.pageSize" style="height: 60px" /><el-paginationstyle="margin: 19px 0 0"class="common-pagination":current-page="pagination.currentPage":page-sizes="[pagination.pageSize]":page-size="pagination.pageSize"layout="slot, prev, pager, next":total="pagination.total":hide-on-single-page="true"@current-change="handleCurrentChange"><div v-show="totalPage > 1" class="el-pagination-jump"><div>第</div><div class="el-pagination-editor"><input v-model="currentPageTemp" autocomplete="off" class="el-inpu-inner"></div>頁/共{{ totalPage }}頁<divclass="jumperBtn"@click="jumpToPage">跳轉</div></div></el-pagination></div> </template><script> export default {name: 'CommonTable',props: {tableData: {type: Array,default: () => []},columns: {type: Array,default: () => []},loading: {type: Boolean,default: true},pagination: {type: Object,default: () => ({})},size: {type: String,default: ''}},data() {return {currentPageTemp: 1 // 緩存要跳轉的頁面}},computed: {totalPage() {if (this.pagination.total && this.pagination.pageSize) {return Math.ceil(this.pagination.total / this.pagination.pageSize)}return 0}},watch: {'pagination.currentPage': function(newVal) {this.currentPageTemp = newVal}},methods: {// 跳轉到指定的頁面jumpToPage() {if (Number(this.currentPageTemp) > this.totalPage) {this.currentPageTemp = this.totalPage}if (isNaN(Number(this.currentPageTemp))) {this.currentPageTemp = 1}this.$emit('currentPageChange', Number(this.currentPageTemp))},handleCurrentChange(val) {this.$emit('currentPageChange', val)}} } </script>

?使用：

<CommonTable:table-data="tableData":pagination="pagination":loading="loading":columns="columns"@currentPageChange="handleCurrentPageChange"><el-table-column slot="type" label="測試" min-width="140"><template slot-scope="scope"><span v-if="scope.row.type === 1">已開啟</span><span v-else-if="scope.rowtype === 2">未開啟</span><span v-else>--</span></template></el-table-column><el-table-column slot="operation" label="操作" min-width="200px"><template slot-scope="scope"><el-linkv-hide-env="['cloud']":underline="false":style="{color: '#46D9FD', marginRight: '18px'}"@click="handleEdit(scope.$index, scope.row,true)">查看</el-link><el-linkv-hide-env="['cloud']":underline="false":style="{color: '#46D9FD', marginRight: '18px'}"@click="handleEdit(scope.$index, scope.row)">編輯</el-link></template></el-table-column></CommonTable>

data：

pagination: {pageSize: 15,currentPage: 1,total: 0,},columns: [{type: 'index',label: '序號',width: '80px'},{label: '測試',slot: 'type'},{label: '測試列',prop: 'test-a'},{label: '操作',slot: 'operation'}] handleCurrentPageChange(val) {this.pagination.currentPage = valgetDataList()},

總結

以上是生活随笔為你收集整理的element 表格+分页封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。