先看代碼:
<el-table :data="tableData" style="width: 100%" stripe size="medium" @sort-change="changeSort">
<el-table-column label="序號" width="80">
<!-- 這是添加分頁時有連接的序號 -->
<template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) *size + 1}} </span></template>
</el-table-column>
<!-- 這是添加排序 -->
<el-table-column prop="date" label="時間" sortable="custom" ref="dateSort">
</el-table-column>
</el-table>
<!-- 分頁 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[ 10, 20, 40]" :page-size="size" :total="total" ></el-pagination>
1.序號
{{scope.$index+(currentPage - 1) *size + 1}}
2.清除排序
this.$refs.dateSort.columnConfig.order = '';
3.解決刪除最后一項時分頁出現問題(數據為空)
思路:當頁面總條數 = (當前頁數-1)*當前頁條數,currentPage減1,重新獲取列表;
watch:{ total(){ if(this.total==(this.currentPage-1)*this.size&& this.total!=0){ this.currentPage-=1; this.getTableData();//獲取列表數據 } } }