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;
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue ElementUI提供了非常方便的表格组件,同时也支持前端分页功能。以下是一个简单的示例代码,演示如何在Vue ElementUI中实现前端分页: ```vue <template> <div> <el-table :data="tableData" :page-size="pageSize" :current-page="currentPage" :total="total" @current-change="handleCurrentChange"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据 pageSize: 10, // 每页显示条数 currentPage: 1, // 当前页数 total: 0 // 总条数 }; }, mounted() { // 初始化数据 this.getTableData(); }, methods: { getTableData() { // 发送请求获取数据,这里使用假数据 const data = [ { name: "Alice", age: 18, gender: "female" }, { name: "Bob", age: 20, gender: "male" }, { name: "Charlie", age: 22, gender: "male" }, { name: "David", age: 24, gender: "male" }, { name: "Emily", age: 26, gender: "female" }, { name: "Frank", age: 28, gender: "male" }, { name: "Grace", age: 30, gender: "female" }, { name: "Henry", age: 32, gender: "male" }, { name: "Iris", age: 34, gender: "female" }, { name: "Jack", age: 36, gender: "male" }, { name: "Kate", age: 38, gender: "female" }, { name: "Leo", age: 40, gender: "male" } ]; // 设置总条数 this.total = data.length; // 计算起始索引和终止索引 const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; // 获取当前页的数据 this.tableData = data.slice(startIndex, endIndex); }, handleCurrentChange(currentPage) { // 当前页数发生变化时重新获取数据 this.currentPage = currentPage; this.getTableData(); } } }; </script> ``` 在上述代码中,我们使用了Vue ElementUI的el-table组件来展示表格数据,通过设置pageSize和currentPage属性来控制每页显示条数和当前页数,使用@current-change事件来监听当前页数的变化,然后再通过计算得到当前页的数据,最后渲染到表格中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值