我有如下所示的一個(gè)table，數(shù)據(jù)data是一個(gè)computed計(jì)算屬性，一般情況下篩選使用element的sortable屬性就可以了，可查看Element - The world's most popular Vue UI framework

但我的 table 是一個(gè)分頁(yè)的 table ，當(dāng)我使用?sortable 時(shí)發(fā)現(xiàn)，它只是對(duì)當(dāng)前頁(yè)的數(shù)據(jù)進(jìn)行排序，但這并不是我需要的，我的需求是，對(duì)全部數(shù)據(jù)進(jìn)行排序。

<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="實(shí)例Id" prop="id" />
      <el-table-column key="instance_type" label="實(shí)例類(lèi)型" prop="instance_type" />
      <el-table-column key="state" label="實(shí)例狀態(tài)" 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="公網(wǎng)IP" prop="ip_address" />
      <el-table-column key="private_ip_address" label="內(nèi)網(wǎng)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>

實(shí)現(xiàn)思路：監(jiān)聽(tīng) table 上的?sort-change （排序條件發(fā)生變化）事件（使用@sort-change），當(dāng)排序條件發(fā)生變化時(shí)，會(huì)觸發(fā)?sortChange 函數(shù)，在?sortChange 函數(shù)中，通過(guò)數(shù)組方法 sort ，對(duì)全部數(shù)據(jù)進(jìn)行排序。reverse（）倒序

const sortChange = (k: any) => {
  function compare(prop: any) {
    // 默認(rèn)傳入兩個(gè)參數(shù)，即為數(shù)組中要比較的兩項(xiàng)
    return function (a: any, b: any) {
      var value1 = a[prop];
      var value2 = b[prop];
      // 通過(guò)返回值的正負(fù)來(lái)排序，返回值必須是數(shù)字類(lèi)型
      if (value1 == 'stopped' && value2 == 'running') {
        return -1
      } else if (value1 == 'running' && value2 == 'stopped') {
        return 1
      } else {
        return 0
      }
    }
  }
  // k是默認(rèn)參數(shù)，sortChange公有三個(gè)默認(rèn)參數(shù)，具體可看官網(wǎng)
  if (k.order === 'ascending') {
    // 升序排序 stopped在前
    // sort使用回調(diào)函數(shù)，傳去需要進(jìn)行排序的列的列名，我這里是state
    state.assetList.sort(compare('state'))
  } else if (k.order === 'descending') {
    // 降序排序 running在前（使用reverse是對(duì)數(shù)據(jù)進(jìn)行翻轉(zhuǎn)）
    state.assetList.reverse()
  }
}

也可以寫(xiě)成文章來(lái)源地址http://www.zghlxwxcb.cn/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'];
      // 通過(guò)返回值的正負(fù)來(lái)排序，返回值必須是數(shù)字類(lèi)型
      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是對(duì)數(shù)據(jù)進(jìn)行翻轉(zhuǎn)）
    state.assetList.reverse()
  }
  state.loading = false
}

到了這里，關(guān)于前端vue3+element plus 分頁(yè)table排序功能實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！