隨著Web應用的發展，表格成為了普遍使用的組件之一。在前端開發中，表格的分頁和全選功能也變得必不可少。這篇文章主要講解了如何在Vue中來實現表格分頁和全選功能。

對于表格分頁功能，我們可以使用element-ui的組件來實現。首先，在模板中引入el-table組件，并設置table的基本屬性，例如columns和data。

<el-table :data="tableData" :columns="tableColumns" :height="350" ref="table"></el-table>

之后，我們需要設置分頁的總頁數和每頁顯示的數量。可以通過計算屬性的方式來實現這個功能：

totalPage(){
return Math.ceil(this.tableData.length / this.pageSize);
},
currentPageData(){
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
return this.tableData.slice(startIndex, endIndex);
}

這里，我們根據每頁顯示條數pageSize 和 當前頁數currentPage 來計算從哪條數據開始以及結束。同時也需要計算總頁數totalPage，這個可以根據數據的總條數和pageSize計算出來。

完成分頁的操作之后，我們需要來實現全選的功能。在Vue中，實現全選功能有兩種方式：手動實現和使用element-ui提供的Checkbox組件。手動實現需要監聽表格中每一個Checkbox的改變事件并將對應的數據記錄到一個臨時變量中。相比較而言，使用element-ui的Checkbox組件則更為方便，只需要設置table組件的show-checkbox屬性即可。

<el-table :data="tableData" :columns="tableColumns" :show-checkbox="true" @selection-change="handleSelectionChange"></el-table>

其中，show-checkbox屬性控制是否顯示表格的Checkbox列，selection-change事件是選中狀態發生改變時觸發的事件，節省了手動監聽每個Checkbox的改變事件的代碼。

至此，我們已經介紹了如何在Vue中來實現表格分頁和全選功能。通過使用element-ui的Table和Pagination組件以及Checkbox對應的組件，我們可以輕易實現表格的分頁和全選功能，節省了大量的開發時間和代碼量。