element表格在前端对全部数据进行排序

1.对全部数据进行排序,需要对el-table绑定sort-change监听

<el-table :data='tableData' @sort-change='sort_change'>

sort-change绑定方法具有参数:column,这是一个对象:

column: { 
  prop: 'xxxx', // el-table-column中的prop
  order: 'xxxx', // 'ascending' or 'descending'
}

sort_change (column){
      console.log(column.prop); //当前列需要排序的数据
      console.log(column.order);//排序规则:descending降序、ascending升序
}

2.列中设置属性sortable=“custom”

<el-table-column prop="time" sortable="custom" label="时间"></el-table-column>

3.js实现排序功能

<script>
export default {
  data() {
    return {
      tableData: [], // 数据列表
      currpage: 1, //当前页码
      proptype: "" //存放column.prop的字符串值
    };
  },
  methods: {
    //排序功能
    sort_change(column) {
      this.currpage = 1; // 排序后返回第一页
      if (column.prop === "time") {
        this.proptype = column.prop; // 将键名prop赋值给变量proptype
        if (column.order === "descending") {
          this.tableData.sort(this.my_desc_sort);
        } else if (column.order === "ascending") {
          this.tableData.sort(this.my_asc_sort);
        }
      } else if (column.prop === "id") {
        this.proptype = column.prop;
        // ...
      }
    },
    //若采用相同排序方法可简写:
    sort_change2(column) {
      this.currpage = 1; // 排序后返回第一页
      this.proptype = column.prop; // 将键名prop赋值给变量proptype
      if (column.order === "descending") {
        this.tableData.sort(this.my_desc_sort);
      } else if (column.order === "ascending") {
        this.tableData.sort(this.my_asc_sort);
      }
    },
    //排序方法
    my_desc_sort(a, b) {
      return b[this.proptype] - a[this.proptype]; // a["time"] 等价于 a.time
    },
    my_asc_sort(a, b) {
      return a[this.proptype] - b[this.proptype];
    }
  }
};
</script>
在 Vue 和 Element UI 中,实现前端表格分页可以遵循以下步骤: 1. 将表格数据存储在一个数组中,例如 tableData。 2. 定义每页显示的数据量,例如 pageSize。 3. 定义当前页码,例如 currentPage。 4. 根据 pageSize 和 currentPage 来计算当前页应该显示的数据,例如: ``` const start = (currentPage - 1) * pageSize; const end = start + pageSize; const pageData = tableData.slice(start, end); ``` 5. 将 pageData 显示在表格中。 6. 在表格下方添加分页组件,使用 Element UI 的 el-pagination 组件即可。将 total 属性设为 tableData.length,pageSize 属性设为 pageSize,v-model 绑定 currentPage。 完整代码示例: ``` <template> <div> <el-table :data="pageData"> <!-- 表格列 --> </el-table> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="tableData.length" @current-change="handleCurrentChange" /> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据 pageSize: 10, // 每页显示的数据量 currentPage: 1, // 当前页码 }; }, computed: { pageData() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.tableData.slice(start, end); }, }, methods: { handleCurrentChange(currentPage) { this.currentPage = currentPage; }, }, }; </script> ``` 这样就可以实现基本的前端表格分页了。如果需要支持排序、筛选等功能,可以在计算 pageData 的时候加入对应的代码。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值