element 前端排序 與 后端排序

前端排序 ：

       <el-table-column
                  prop="total_fee" sortable :sort-orders="['descending','ascending']"
                  align="center"
                  label="收入情況">
                </el-table-column>

后端排序;

1.表格行

 <el-table-column
                  prop="transfer"
                  :sortable="'custom'"
                  align="center"
                  label="轉賬匯款">
                </el-table-column>

2.表格 

 <el-table
                key="3"
                align="center"
                v-if="type===1"
                class="table1"
                stripe
                show-summary
                :summary-method="getSummaries" @sort-change="changeTableSort1"
                :header-cell-style="headerCellStyle"
                :data="tableData">

 

 

3.方法

data  數據 

        // 排序 1: 總金額 2:支付寶 3:微信 4:貝寶 5:轉賬 6: 退款 7: 定金 8 :尾款
        incomeSort:  {
          "total": 1,
          "ali": 2,
          "wx": 3,
          "paypal": 4,
          "transfer": 5,
          "refund": 6,
          "depositFee": 7,
          "finalPayFee": 8,
        },

 

  changeTableSort1 (column) {
        this.orderField = column.order === 'ascending' ? -this.incomeSort[column.prop] : (column.order === 'descending' ? this.incomeSort[column.prop] : '')
        if (this.orderField) {
          this.getListHand()
        }
      },

this.getListHand() 是后端接口