因数据量不大,后端返回所有数据,前端做分页和排序。
<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;
}
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » elementui 表格前端自主排序,自主分页
发表评论 取消回复