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

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

html 复制代码
<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>

排序代码如下

javascript 复制代码
 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; // 非数字值保持原顺序
      }
    }

分页代码如下

javascript 复制代码
handleSizeChange(val){
	this,form.page = 1;
	this.pageSize = val;
},
handelCurrentChange(val){
	this.form.page = val;
}
相关推荐
Enddme1 分钟前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼1 分钟前
前端面试中值得关注的js题
前端·面试
UnnamedOrange8 分钟前
有来前后端部署
前端·后端
力Mer9 分钟前
全排列-遇到的深浅拷贝问题
javascript
德育处主任10 分钟前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
未来之窗软件服务13 分钟前
未来之窗昭和仙君 (四) 前端网页分页 — 东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·东方仙盟修仙·昭和仙君
安卓开发者24 分钟前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos
安卓开发者24 分钟前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
fdc20171 小时前
Avalonia 基础导航实现:从页面切换到响应式交互全指南
开发语言·javascript·ecmascript
Sapphire~1 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css