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

亲亲晴崽2024-07-03 17:30

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

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;
}