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

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

如上圖表格：

代碼一：

<div class="task__content"><divv-if="all_dial && tableData !== []"class="statistical_data"><span style="margin-right: 8px;">總撥打次數(shù)：{{ all_dial? all_dial : 0 }}次</span><span style="margin-right: 8px;">總通話次數(shù)：{{ all_deal ? all_deal : 0 }}次</span><span>總通話時長：{{ all_duration ? all_duration: 0 }}</span></div><el-tablev-loading="loading"ref="table":data="tableData"bordersize="small"@sort-change="changeSort"><el-table-columnlabel="排名"align="center"><template slot-scope="scope"><strong>{{ scope.row.rank }}</strong></template></el-table-column><el-table-columnprop="dept_name"label="部門"align="center"/><el-table-columnprop="region_name"label="大區(qū)"align="center"/><el-table-columnprop="group_name"label="小組"align="center"/><el-table-columnlabel="姓名/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="撥打次數(shù)"align="center"/><el-table-column:sortable="pages.totalCount > 0"prop="time"label="通話次數(shù)"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();}

在我們調(diào)用 查詢接口的時候 需要傳入 sort 字段表示排序類型，所以我們可以根據(jù)上面的傳入不同的值和后端約定。

這里有人會問，最后一個字段“通話時長” 這個是字符串，怎么進行數(shù)字的升序排序。 其實呢，我是這樣子處理的，如上圖代碼的處理方式：

代碼四：

<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 數(shù)字類型的，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}''`;},

總結

以上是生活随笔為你收集整理的elemet UI 中表格数据的排序操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。