elemet UI 中表格資料的排序操作
阿新 • • 發佈:2018-11-26
入上圖所示,我們要對“撥打次數”、“通話次數”,“通話時間” 進行排序。這裡有什麼辦法呢?
其實排序的主要工作量是在後端,前端只需要將 排序標誌傳遞給後端即可。
如上圖表格:
程式碼一:
<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}''`;
},