快捷導(dǎo)航

前端使用el-table自帶排序功能\后端排序方法實例

更新時間：2024年08月07日 10:08:51 作者：晨晨晨翔啊～126

在Vue.js中使用Element UI庫時可以通過el-table組件來展示表格數(shù)據(jù),并支持列排序,下面這篇文章主要給大家介紹了關(guān)于前端使用el-table自帶排序功能\后端排序的相關(guān)資料,需要的朋友可以參考下

排序可以分成兩種類型的：

一種是只在前端頁面進(jìn)行排序，不能跨頁面排序；

另外一種是需要后端排序，需要調(diào)用后端接口處理

前端處理：

這里使用的是，需要后端進(jìn)行排序

在需要使用排序的列上添加 sortable="custom"，并且在el-table添加監(jiān)聽事件@sort-change調(diào)用后端接口

sortable="custom" 是一個固定的標(biāo)識

<el-table :data="dataList" @sort-change='sortTableFun'>
  // 需要排序的列添加 sortable="custom" 后端排序
  <el-table-column prop="prodIdName"  label="商品名稱" sortable="custom" />  
</el-table>

點(diǎn)擊排序列監(jiān)聽事件@sort-change會傳遞一個對象給我們定義的方法。

這個對象中可以獲取到我們需要的兩個值，一個是需要排序的值即列上綁定的prop值；以及排序的方式descending。

// 調(diào)用后端排序
sortTableFun(val) {
  this.dataForm.orderField = null;
  if (val.order) {
    // val.prop 是排序的字段，即在前端列上綁定的prop上的值
    // <el-table-column prop="prodIdName",注意注意注意：這個值可能是為了展示名稱的id值
    // 因此在后端判斷是否是這個屬性值排序時，還要根據(jù)表中具體的值繼續(xù)排序
    this.dataForm.orderField = val.prop
    // val.order 是排序的方式
    this.dataForm.orderMethod = val.order == "descending" ? "desc" : "asc";
    this.searchQuery();
  }
},

添加后如下所示：

后端處理：

后端在對象中定義好接收排序值、以及排序方式的變量：orderField、orderMethod

// 前端prop展示prodIdName,但在db中字段是prodId因此這個排序得特殊處理一下
// 注意排序方式比較時，忽略大小寫比較equalsIgnoreCase
wrapper.orderBy(request.getOrderField().equals("prodIdName"), request.getOrderMethod().equalsIgnoreCase("asc"), Product::getProdId);
wrapper.orderBy(request.getOrderField().equals("price"), request.getOrderMethod().equalsIgnoreCase("asc"), Product::getPrice);

官方文檔：Element - The world's most popular Vue UI framework