入上圖所示，我們要對“撥打次數”、“通話次數”，“通話時間” 進行排序。這裡有什麼辦法呢？

其實排序的主要工作量是在後端，前端只需要將 排序標誌傳遞給後端即可。

如上圖表格：

程式碼一：

<div class="task__content">
      <div
        v-if="all_dial && tableData !== []"
        class="statistical_data"><span style="margin-right: 8px;">總撥打次數：{{ all_dial? all_dial : 0 }}次</span><span style="margin-right: 8px;">總通話次數：{{ all_deal ? all_deal : 0 }}次</span><span>總通話時長：{{ all_duration ? all_duration: 0 }}</span></div>
      <el-table
        v-loading="loading"
        ref="table"
        :data="tableData"
        border
        size="small"
        @sort-change="changeSort">
        <el-table-column
          label="排名"
          align="center">
          <template slot-scope="scope">
            <strong>{{ scope.row.rank }}</strong>
          </template>
        </el-table-column>
        <el-table-column
          prop="dept_name"
          label="部門"
          align="center"/>
        <el-table-column
          prop="region_name"
          label="大區"
          align="center"/>
        <el-table-column
          prop="group_name"
          label="小組"
          align="center"/>
        <el-table-column
          label="姓名/ID"
          align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.admin_name || '--' }} / {{ scope.row.admin_id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :sortable="pages.totalCount > 0"
          prop="call_time"
          label="撥打次數"
          align="center"/>
        <el-table-column
          :sortable="pages.totalCount > 0"
          prop="time"
          label="通話次數"
          align="center"/>
        <el-table-column
          :sortable="pages.totalCount > 0"
          sort-orders ="[ascending, descending, null]"
          prop="duration"
          label="通話時間"
          align="center">
          <template slot-scope="scope">{{ scope.row.durationDeal }}</template>
        </el-table-column>
      </el-table>
    </div>
 

在列表排序的時候繫結一個事件：
程式碼二：

 @sort-change="changeSort"

然後我們可以和後端約定排序傳入的值：

程式碼三：

    changeSort(val) {
      this.sort = 0;
      if (val.prop === "call_time") {
        if (val.order === "descending") {
          this.sort = 2;
        } else if (val.order === "ascending") {
          this.sort = 1;
        }
      } else if (val.prop === "time") {
        if (val.order === "descending") {
          this.sort = 4;
        } else if (val.order === "ascending") {
          this.sort = 3;
        }
      } else if (val.prop === "duration") {
        if (val.order === "ascending") {
          this.sort = 5;
        } else if (val.order === "ascending") {
          this.sort = 6;
        }
      }

      this.getList();
    }
    
 

在我們呼叫 查詢介面的時候 需要傳入 sort 欄位表示排序型別，所以我們可以根據上面的傳入不同的值和後端約定。

這裡有人會問，最後一個欄位“通話時長” 這個是字串，怎麼進行數字的升序排序。 其實呢，我是這樣子處理的，如上圖程式碼的處理方式：

程式碼四：

 <el-table-column
          :sortable="pages.totalCount > 0"
          sort-orders ="[ascending, descending, null]"
          prop="duration"
          label="通話時間"
          align="center">
          <template slot-scope="scope">{{ scope.row.durationDeal }}</template>
        </el-table-column>
        
 

duration 數字型別的，durationDeal 是處理以後 列表中展示的樣子

程式碼五：

時間的格式化處理：

    timeDeal(time) {
      const timer = +time;
      const minutes = Math.floor(timer / 60);
      const seconds =
        (timer % 3600) % 60 > 9
          ? (timer % 3600) % 60
          : `0${(timer % 3600) % 60}`;

      return `${minutes}'${seconds}''`;
    },