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

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

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

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

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

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

也可以写成文章来源地址https://www.toymoban.com/news/detail-630739.html

const sortChange = (k: any) => {
  if (k.order === 'ascending') {
    // 升序排序 stopped在前
    state.assetList.sort((a: any, b: any)=>{
      var value1 = a['state'];
      var value2 = b['state'];
      // 通过返回值的正负来排序，返回值必须是数字类型
      if (value1 == 'stopped' && value2 == 'running') {
        return -1
      } else if (value1 == 'running' && value2 == 'stopped') {
        return 1
      } else {
        return 0
      }
    })
  } else if (k.order === 'descending') {
    // 降序排序 running在前（使用reverse是对数据进行翻转）
    state.assetList.reverse()
  }
  state.loading = false
}

到了这里，关于前端vue3+element plus 分页table排序功能实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！