elemet UI 中表格数据的排序操作

在这里插入图片描述

入上图所示，我们要对“拨打次数”、“通话次数”，“通话时间” 进行排序。这里有什么办法呢？

其实排序的主要工作量是在后端，前端只需要将排序标志传递给后端即可。

如上图表格：

代码一：

<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}''`;
    },

elemet UI 中表格数据的排序操作

猜你喜欢