版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_24147051/article/details/83142750
入上图所示,我们要对“拨打次数”、“通话次数”,“通话时间” 进行排序。这里有什么办法呢?
其实排序的主要工作量是在后端,前端只需要将 排序标志传递给后端即可。
如上图表格:
代码一:
<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}''`;
},