前端使用el-table自帶排序功能\后端排序方法實例
更新時間：2024年08月07日 10:08:51 作者：晨晨晨翔啊～126
在Vue.js中使用Element UI庫時可以通過el-table組件來展示表格數(shù)據(jù),并支持列排序,下面這篇文章主要給大家介紹了關于前端使用el-table自帶排序功能\后端排序的相關資料,需要的朋友可以參考下
排序可以分成兩種類型的：
一種是只在前端頁面進行排序，不能跨頁面排序；
另外一種是需要后端排序，需要調(diào)用后端接口處理
前端處理：
這里使用的是，需要后端進行排序
在需要使用排序的列上添加 sortable="custom"，并且在el-table添加監(jiān)聽事件@sort-change調(diào)用后端接口
sortable="custom" 是一個固定的標識
<el-table :data="dataList" @sort-change='sortTableFun'> // 需要排序的列添加 sortable="custom" 后端排序 <el-table-column prop="prodIdName" label="商品名稱" sortable="custom" /> </el-table>
點擊排序列監(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
總結
到此這篇關于前端使用el-table自帶排序功能\后端排序的文章就介紹到這了,更多相關前端el-table排序功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue v-on:click傳遞動態(tài)參數(shù)的步驟
這篇文章主要介紹了vue v-on:click傳遞動態(tài)參數(shù)的步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法
大家都遇到這樣的問題,在使用函數(shù)的async/await異步調(diào)用時候,放在正常函數(shù)中單個調(diào)用時沒有問題的,但是await放在forEach()循環(huán)里面就會報錯,本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調(diào)用?async/await,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue自動構建發(fā)布腳本的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)按鈕可隨意移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
今天小編就為大家分享一篇vue項目中跳轉(zhuǎn)到外部鏈接的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中的render函數(shù),它返回的是一個虛擬節(jié)點vnode,也就是我們要渲染的節(jié)點,下面這篇文章主要給大家介紹了關于Vue中render函數(shù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
下面小編就為大家分享一篇解決vue中對象屬性改變視圖不更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關于vue3.0中使用element的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
vue3 ts組合式API異常onMounted is called when&
這篇文章主要為大家介紹了vue3 ts組合式API異常onMounted is called when there is no active component問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
目中出現(xiàn)多級菜單時,需要多層for循環(huán)時,但是當菜單增加層級時,需要在頁面結構中增加一層for循環(huán),這時我們可以使用組件遞歸的思想來實現(xiàn),下面這篇文章主要給大家介紹了關于vue業(yè)務實例之組件遞歸及其應用的相關資料,需要的朋友可以參考下2022-05-05