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;
}
相关推荐
前端AK君3 分钟前
React中台系统如何嵌入到业务系统中
前端
Slice_cy5 分钟前
不定高虚拟列表
前端
前端AK君14 分钟前
React组件库如何在vue项目中使用
前端
Moonbit24 分钟前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud27 分钟前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构
li357437 分钟前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
菜市口的跳脚长颌41 分钟前
Web3 基础
前端
快乐是Happy41 分钟前
分享一个非常实用的防止重复提交操作
前端·javascript
王蛋11142 分钟前
前端工作问题或知识记录
前端·npm·node.js
可子是我的小猫44 分钟前
【JS】模块(二)
javascript