您的位置:首页 > 科技 > IT业 > elementui 表格前端自主排序,自主分页

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

2024/12/23 5:16:51 来源:https://blog.csdn.net/qq_42197013/article/details/140119619  浏览:    关键词: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;
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com