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;
}
相关推荐
qq_5470261792 小时前
Flowable 工作流引擎
java·服务器·前端
刘逸潇20053 小时前
CSS基础语法
前端·css
吃饺子不吃馅4 小时前
[开源] 从零到一打造在线 PPT 编辑器:React + Zustand + Zundo
前端·svg·图形学
小马哥编程5 小时前
【软考架构】案例分析-Web应用设计(应用服务器概念)
前端·架构
鱼与宇5 小时前
苍穹外卖-VUE
前端·javascript·vue.js
啃火龙果的兔子5 小时前
前端直接渲染Markdown
前端
z-robot5 小时前
Nginx 配置代理
前端
用户47949283569155 小时前
Safari 中文输入法的诡异 Bug:为什么输入 @ 会变成 @@? ## 开头 做 @ 提及功能的时候,测试同学用 Safari 测出了个奇怪的问题
前端·javascript·浏览器
没有故事、有酒5 小时前
Ajax介绍
前端·ajax·okhttp
朝新_5 小时前
【SpringMVC】详解用户登录前后端交互流程:AJAX 异步通信与 Session 机制实战
前端·笔记·spring·ajax·交互·javaee