elementui 表格前端自主排序，自主分页

因数据量不大，后端返回所有数据，前端做分页和排序。

<el-table :data="table.data.slice((form.page-1)*form.pageSize,form.page*form.pageSize)"
@sort-change="sorttablefun">
<el-table-column prop="i0" label="零序电流" sortable="custom"/>
</el-table>
<div class="block" style="margin-top:0px;"><el-pagination align='center' background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10]" :page-size="form.pageSize" layout="slot, total, sizes, prev, pager, next, jumper" :total="table.total"></el-pagination></div>

排序代码如下

 handleSort({ column, prop, order }) {this.loading = true;this.tableData.sort((a, b) => {const valA = this.getValue(a[prop]);const valB = this.getValue(b[prop]);if (order === 'ascending') {return this.compare(valA, valB);} else {return this.compare(valB, valA);}});this.loading = false;},getValue(value) {// 自定义函数，处理各种类型值if (typeof value === 'number') {return value;} else if (typeof value === 'string' && /^\d+(\.\d+)?$/.test(value)) {return parseFloat(value);} else {return Infinity; // 非数字值按无穷大处理}},compare(a, b) {if (typeof a === 'number' && typeof b === 'number') {return a - b;} else if (typeof a === 'number') {return -1; // 数字排在前面} else if (typeof b === 'number') {return 1; // 数字排在前面} else {return 0; // 非数字值保持原顺序}}

分页代码如下

handleSizeChange(val){this,form.page = 1;this.pageSize = val;
},
handelCurrentChange(val){this.form.page = val;
}