【P13】JMeter 常数吞吐量定时器（Constant Throughput Timer）

文章目录

一、常数吞吐量定时器（Constant Throughput Timer）参数说明

可以让线程以一个目标吞吐量去运行

右键 >>> 添加 >>> 定时器 >>> 常数吞吐量定时器（Constant Throughput Timer）

在这里插入图片描述

（1）、目标吞吐量（每分钟的样本量）（Target throughput （in samples per minute））：每分钟的吞吐量

（2）、基于计算吞吐量（Calculate Throughput based on）：

  • 只有此线程（this thread only）：控制每个线程的吞吐量，选择这种模式时，总的吞吐量为设置的target Throughput 乘以该线程的数量

  • 所有活动线程（all active threads）：设置的target Throughput 将分配在每个活跃线程上，每个活跃线程在上一次运行结束后等待合理的时间后再次运行。活跃线程指同一时刻同时运行的线程

  • 当前线程组中的所有活动线程（all active threads in current thread group）：设置的target Throughput 将分配在当前线程组的每一个活跃线程上，当测试计划中只有一个线程组时，该选项和all active threads 选项的效果完全相同

  • 所有活动线程（共享）（all avtive threads （shared））：与all active threads的选项基本相同。唯一区别是，每个活跃线程都会在所有活跃线程上一次运行结束后等待合理的时间后再次运行

  • 当前线程组中的所有活动线程（共享）（all active threads in current thread group （shared））：与all active threads in current thread group 基本相同，唯一的区别是，每个活跃线程都会在所有活跃线程的上一次运行结束后等待合理的时间后再次运行

二、测试计划设计

1、基于计算吞吐量：只有此线程

（1）、测试计划右键 <<< 添加 <<< 定时器 <<< 常数吞吐量定时器（Constant Throughput Timer）

在这里插入图片描述

  • 目标吞吐量（每分钟的样本量）：120.0

目标吞吐量为120.0，相当于一秒两个，大概就是 TPS 为 2

（2）、测试计划右键 <<< 添加 <<< 线程（用户）<<< 线程组，设置线程数为5，永久循环，勾选调度器，持续300秒

在这里插入图片描述

  • 线程数：5

  • 勾选永远

  • 勾选调度器

  • 持续时间（秒）：300

这里每秒执行五个线程数，定时器中 TPS 为 2，乘以每秒五个线程数，此时 TPS 为 10

（3）、线程组右键 <<< 添加 <<< 取样器 <<< 调试取样器（Debug Sampler）

在这里插入图片描述

（4）、线程组右键 <<< 添加 <<< 监听器 <<< 查看结果树

（5）、线程组右键 <<< 添加 <<< 监听器 <<< 汇总报告

（6）、点击启动，点开查看结果树，观察Text下的取样器

在这里插入图片描述

可以点击调试取样器，查看取样器结果中的时间，可以发，每一秒，有十个调试取样器

（7）、点开汇总报告查看

在这里插入图片描述

线程组中设置执行360s，如图，样本为3598，大致就是每秒10个，所以吞吐量 TPS 大概为 10

只有此线程：目标吞吐量 * 线程数

2、基于计算吞吐量：所有活动线程

（1）、修改常数吞吐量定时器，基于计算吞吐量选择所有活动线程，清除全部，并启动

在这里插入图片描述

（2）、点开查看结果树，观察Text下的取样器

在这里插入图片描述

可以点击调试取样器，查看取样器结果中的时间，可以发送，每一秒，有两个调试取样器

（3）、点开汇总报告查看

在这里插入图片描述

线程组中设置执行360s，如图，样本为724，大致就是每秒2个，所以吞吐量 TPS 大概为 2

所有活动线程：目标吞吐量

3、基于计算吞吐量：当前线程组中的所有活动线程

（1）、修改常数吞吐量定时器，基于计算吞吐量选择当前线程组中的所有活动线程

在这里插入图片描述

（2）、测试计划右键 <<< 添加 <<< 线程（用户）<<< 线程组，设置线程数为5，永久循环，勾选调度器，持续300秒

在这里插入图片描述

  • 线程数：5

  • 勾选永远

  • 勾选调度器

  • 持续时间（秒）：300

（3）、新增的线程组右键 <<< 添加 <<< 取样器 <<< 调试取样器（Debug Sampler）

（4）、新增的线程组右键 <<< 添加 <<< 监听器 <<< 汇总报告

（5）、清除全部，点击启动，查看第一个线程组的汇总报告

在这里插入图片描述

线程组中设置执行360s，如图，样本为724，大致就是每秒2个，所以吞吐量 TPS 大概为 2

（6）、查看第二个线程组的汇总报告

在这里插入图片描述

线程组中设置执行360s，如图，样本为724，大致就是每秒2个，所以吞吐量 TPS 大概为 2

当前线程组中的所有活动线程：目标吞吐量

4、基于计算吞吐量：所有活动线程（共享）

（1）、修改常数吞吐量定时器，基于计算吞吐量选择所有活动线程（共享）

在这里插入图片描述

（2）、点击清除全部，点击启动，查看第一个线程组下的汇总报告

在这里插入图片描述

如图，样本为360， TPS 大概为 1

（3）、查看第二个线程组下的汇总报告

在这里插入图片描述

如图，样本为360， TPS 大概为 1；一共有两个活动线程，共享模式下，分配给每个线程组各一个

所有活动线程（共享）：目标吞吐量 / 所有活动线程

5、基于计算吞吐量：当前线程组中的所有活动线程（共享）

（1）、修改常数吞吐量定时器，基于计算吞吐量选择当前线程组中的所有活动线程（共享）

在这里插入图片描述

（2）、点击清除全部，点击启动，查看第一个线程组下的汇总报告

在这里插入图片描述

如图，样本为720， TPS 大概为 2

（3）、查看第二个线程组下的汇总报告

在这里插入图片描述

如图，样本为721， TPS 大概为 2

当前线程组中的所有活动线程（共享）：目标吞吐量 / 单线程组下所有活动线程

id="article_content" class="article_content clearfix"> id="content_views" class="htmledit_views">

        写这篇博客的原因是前段时间做了一个数据列可变的表格，同时需要实现在网页中更新了数据列之后，能够对表格进行排序的需求。如果想要直接了解实现el-table的动态数据动态排序（列数据是通过计算获得，并且可以在页面中修改，在此基础上实现数据变化后实时更新）。请直接跳到第三章：当数据列是不确定数据时，实现列排序功能

目录

一、el-table的排序功能

        在列的标签中添加 sortable 即可添加列排序标签，可添加多个。

二、el-table的自定义排序功能

        添加 sortable 标签是默认排序，添加 sort-method 或者 sort-by 则可以使用自定义的排序规则。

三、当数据列是不确定数据时，实现列排序功能

一、el-table的排序功能

        在列的标签中添加 sortable 即可添加列排序标签，可添加多个。

  1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">
class="hljs-ln-code"> class="hljs-ln-line"> <el-table :data="rankingDataFormatted" stripe>
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2">
    • class="hljs-ln-code"> class="hljs-ln-line"> <el-table-column
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> prop="ranking"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> label="Rank"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line"> width="100"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> >el-table-column>
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line"> <el-table-column
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line"> prop="cityName"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> label="Country"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"> width="200"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> >el-table-column>
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> <el-table-column
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line"> prop="score"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> label="Score"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> width="200"
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line"> sortable
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line"> >el-table-column>
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line"> <el-table-column prop="performance" label="Performance">
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line"> el-table-column>
  • class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line"> el-table>
    •  class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

            效果是这样的：

    二、el-table的自定义排序功能

            添加 sortable 标签是默认排序，添加 sort-method 或者 sort-by 则可以使用自定义的排序规则。

            其中scoreOrder是一个定义在methods中的排序方法（如果是composition API就直接const scoreOrder = （参数）=> {方法体}）。

            这个方法接受两个参数，代表要进行比较的两行数据，可以通过读取对应属性（比如这里对应的属性名是score）来进行比较，该方法接受一个返回值，返回-1代表第一个参数应排在第二个参数之前，返回1代表之后，也可以返回零，一般表示相等，实际使用中不太用的上。

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">    <el-table :data="rankingDataFormatted" stripe>
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column 
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">        type="index" 
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">        label="Rank" 
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">        width="100"
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">      >el-table-column>
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">        prop="cityName"
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">        label="Country"
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">        width="200"
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">      >el-table-column>
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">        prop="score"
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">        label="Score"
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">        width="200"
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">        :sort-method="scoreOrder"
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">      >el-table-column>
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column prop="performance" label="Performance">
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">      el-table-column>
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">    el-table>
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

            随便举个例子：

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">methods(){
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">    scoreOrder(a, b) {
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">      // 自定义排序逻辑
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">      if (a.score< b.score) {
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">        return -1;
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">      }
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">      if (a.score> b.score) {
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">        return 1;
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">      }
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">      // 相同则返回0，表示不变
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">      return 0;
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">    },
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">}
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">//如果是composition API
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> 
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">    const scoreOrder = (a, b) => {
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">      // 自定义排序逻辑
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">      if (a.score< b.score) {
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">        return -1;
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">      }
    21.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">      if (a.score> b.score) {
    22.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">        return 1;
    23.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">      }
    24.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">      // 相同则返回0，表示不变
    25.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line">      return 0;
    26.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">    },
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

    三、当数据列是不确定数据时，实现列排序功能

            现在来聊一聊关于不确定数据/可变数据的情况，elementui目前提供的主流排序方法就是以上两种，也能解决大多数问题，但在解决实际需求时发现有时候我们用来排序的数据并不是一开始就能够获取的，而是可变的、计算的、实时变化的。

            如下图所示，formatScore是一个计算方法，此时Score这一列的数据是获取不到的，这样通过 sort-method 获得的行数据是null或者undefined。

            此时就要用到 @sort-change 事件了，在elementui官方文档里是这么表述这个事件的：

            当表格的排序条件发生变化的时候会触发该事件

            如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件， 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 

            由于官方没有具体的举例，“后端排序”乍一看好像格外高级，事实上这里的后端排序指的就是给你监听一个事件，你自己（在后端）写一个排序的API就行，这样获取数据的时候就是排好序的数据。也就是说“后端排序”并不一定要在后端完成，搞懂了原理就在前端写是一样的。

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">    <el-table :data="rankingDataFormatted" stripe @sort-change="tableSort">
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column 
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">        type="index" 
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">        label="Rank" 
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">        width="100"
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">      >el-table-column>
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">        prop="cityName"
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">        label="Country"
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">        width="200"
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">      >el-table-column>
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column label="Score" width="200" sortable="custom">
    13.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">        
    14.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">        <template v-slot="scope">
    15.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">          {{ formatScore(scope.row) }}
    16.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">        template>
    17.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">      el-table-column>
    18.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">      <el-table-column prop="performance" label="Performance">
    19.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">      el-table-column>
    20.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">    el-table>
     class="hide-preCode-box"> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

            在点击排序按钮时就能触发tableSort方法，按实际需求完成tableSort方法的逻辑，给个例子：

    1.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">const tableSort = ({ column, prop, order }) => {
    2.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  // 直接使用array.sort()方法，对原始数组数据进行处理
    3.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">  rankingDetailData.sort((a, b) => {
    4.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">    const scoreA = formatScore(a);
    5.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">    const scoreB = formatScore(b);
    6.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">    if (order === "ascending") {
    7.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">      return scoreA - scoreB;
    8.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">    } else {
    9.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">      return scoreB - scoreA;
    10.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">    }
    11.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">  });
    12.  class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">};
     class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

            如上所示，添加了 sortable="custom" 和 @sort-change 之后，本质就是让原先的排序按钮失效，并且监听该事件的发生，至于监听后到底触发什么事件，是按某种方式排序，还是弹出一个窗口，甚至关闭浏览器都可以自定义，这才是官方文档中“后端排序”的本质原理。

            Element Plus官网Table：Table 表格 | Element Plus

            博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

    data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/RenGJ010617/article/details/137382619","extend1":"pc","ab":"new"}">>
    注：本文转载自blog.csdn.net的小鹿快跑～的文章"https://blog.csdn.net/qq_45138120/article/details/130566188"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
    复制链接
    复制链接
    相关推荐
    发表评论

    评论记录：

    未查询到任何数据！