element多列排序

最新推荐文章于 2024-09-13 11:27:00 发布

原创

最新推荐文章于 2024-09-13 11:27:00 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

这篇博客介绍了如何在前端使用El-Table组件实现表格数据的排序功能，包括单列排序和多级排序。通过监听sort-change事件和自定义表头样式，动态更新排序状态并调用后端接口获取排序后的数据。同时，文章还涉及了重置排序状态的逻辑处理。

 <div class="table">
      <el-table
        :data="tableData"
        borderstyle="width: 100%"
        border
        stripe
        @sort-change="sortChange"
        ref="table"
        :height="tableHeight"
        :header-cell-style="handleTheadStyle"
      >

<el-table-column label="Ledger Amt" prop="amountLedger" min-width="100" align="center" sortable="amountLedger">
          <template slot-scope="scope">
            <span>{
  
  {scope.row.amountLedger | thousands}}</span>
          </template>
</el-table-column>

  props: {
    mutilSort: {
        default: true
    },
  },
  data() {
    return {
      activeThead: {} //保存所选择的表头
    }
  }

 reset() {
      this.searchForm = {};
      this.sortList = [];
      this.$refs.table.clearSort();
      for(let key in this.activeThead){
        if(this.activeThead[key]){
          this.activeThea