前端vue3+element plus 分页table排序功能实现

我有如下所示的一个table，数据data是一个computed计算属性，一般情况下筛选使用element的sortable属性就可以了，可查看Element - The world's most popular Vue UI framework

但我的 table 是一个分页的 table ，当我使用 sortable 时发现，它只是对当前页的数据进行排序，但这并不是我需要的，我的需求是，对全部数据进行排序。

1.  
   <el-table v-loading="loading" ref="tableRef"
2.  
   :data="filteredAssetList.slice((pageParams.page_num - 1) * pageParams.page_size, pageParams.page_num * pageParams.page_size)"
3.  
   :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
4.  
   @sort-change="sortChange"
5.  
   @filter-change="resetQuery">
6.  
   <el-table-column key="id" label="实例Id" prop="id" />
7.  
   <el-table-column key="instance_type" label="实例类型" prop="instance_type" />
8.  
   <el-table-column key="state" label="实例状态" sortable="custom" prop="state" column-key="state">
9.  
   <template #default="scope">
10.  
    <el-tag v-if="scope.row.state === 'running'" type="success">{{ scope.row.state }}</el-tag>
11.  
    <el-tag v-else type="danger">{{ scope.row.state }}</el-tag>
12.  
    </template>
13.  
    </el-table-column>
14.  
    <el-table-column key="ip_address" label="公网IP" prop="ip_address" />
15.  
    <el-table-column key="private_ip_address" label="内网IP" prop="private_ip_address" />
16.  
    <el-table-column key="tagteam" label="Tag_Team" prop="tagteam" />
17.  
    <el-table-column key="taggroup" label="Tag_Group" prop="taggroup" />
18.  
    <el-table-column key="tagname" label="Tag_Name" prop="tagname" />
19.  
    <el-table-column label="操作" align="center" width="80">
20.  
    <template #default="scope">
21.  
    <el-button type="primary" :icon="Document" circle plain @click.stop="assetDetail(scope.row)" />
22.  
    </template>
23.  
    </el-table-column>
24.  
    </el-table>

实现思路：监听 table 上的 sort-change （排序条件发生变化）事件（使用@sort-change），当排序条件发生变化时，会触发 sortChange 函数，在 sortChange 函数中，通过数组方法 sort ，对全部数据进行排序。reverse（）倒序

1.  
   const sortChange = (k: any) => {
2.  
   function compare(prop: any) {
3.  
   // 默认传入两个参数，即为数组中要比较的两项
4.  
   return function (a: any, b: any) {
5.  
   var value1 = a[prop];
6.  
   var value2 = b[prop];
7.  
   // 通过返回值的正负来排序，返回值必须是数字类型
8.  
   if (value1 == 'stopped' && value2 == 'running') {
9.  
   return -1
10.  
    } else if (value1 == 'running' && value2 == 'stopped') {
11.  
    return 1
12.  
    } else {
13.  
    return 0
14.  
    }
15.  
    }
16.  
    }
17.  
    // k是默认参数，sortChange公有三个默认参数，具体可看官网
18.  
    if (k.order === 'ascending') {
19.  
    // 升序排序 stopped在前
20.  
    // sort使用回调函数，传去需要进行排序的列的列名，我这里是state
21.  
    state.assetList.sort(compare('state'))
22.  
    } else if (k.order === 'descending') {
23.  
    // 降序排序 running在前（使用reverse是对数据进行翻转）
24.  
    state.assetList.reverse()
25.  
    }
26.  
    }

也可以写成

1.  
   const sortChange = (k: any) => {
2.  
   if (k.order === 'ascending') {
3.  
   // 升序排序 stopped在前
4.  
   state.assetList.sort((a: any, b: any)=>{
5.  
   var value1 = a['state'];
6.  
   var value2 = b['state'];
7.  
   // 通过返回值的正负来排序，返回值必须是数字类型
8.  
   if (value1 == 'stopped' && value2 == 'running') {
9.  
   return -1
10.  
    } else if (value1 == 'running' && value2 == 'stopped') {
11.  
    return 1
12.  
    } else {
13.  
    return 0
14.  
    }
15.  
    })
16.  
    } else if (k.order === 'descending') {
17.  
    // 降序排序 running在前（使用reverse是对数据进行翻转）
18.  
    state.assetList.reverse()
19.  
    }
20.  
    state.loading = false
21.  
    }

这篇好文章是转载于：学新通技术网