前端使用el-table自帶排序功能\后端排序方法實(shí)例
排序可以分成兩種類型的：
一種是只在前端頁面進(jìn)行排序，不能跨頁面排序；
另外一種是需要后端排序，需要調(diào)用后端接口處理
前端處理：
這里使用的是，需要后端進(jìn)行排序
在需要使用排序的列上添加 sortable="custom"，并且在el-table添加監(jiān)聽事件@sort-change調(diào)用后端接口
sortable="custom" 是一個(gè)固定的標(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會(huì)傳遞一個(gè)對象給我們定義的方法。
這個(gè)對象中可以獲取到我們需要的兩個(gè)值，一個(gè)是需要排序的值即列上綁定的prop值；以及排序的方式descending。
// 調(diào)用后端排序
sortTableFun(val) {
this.dataForm.orderField = null;
if (val.order) {
// val.prop 是排序的字段，即在前端列上綁定的prop上的值
// <el-table-column prop="prodIdName",注意注意注意：這個(gè)值可能是為了展示名稱的id值
// 因此在后端判斷是否是這個(gè)屬性值排序時(shí)，還要根據(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因此這個(gè)排序得特殊處理一下
// 注意排序方式比較時(shí)，忽略大小寫比較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
總結(jié)
到此這篇關(guān)于前端使用el-table自帶排序功能\后端排序的文章就介紹到這了,更多相關(guān)前端el-table排序功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境，給大家講解依次搭建組件庫、example、文檔、cli，本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程，感興趣的朋友跟隨小編一起看看吧2022-11-11
Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端
這篇文章主要介紹了Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
vscode中開發(fā)運(yùn)行uniapp項(xiàng)目詳細(xì)步驟
VSCode作為一個(gè)非常強(qiáng)大的代碼編輯器,可以集成眾多的插件和工具來優(yōu)化開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode中開發(fā)運(yùn)行uniapp項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2023-07-07
vue3+ts+axios+pinia實(shí)現(xiàn)無感刷新方式
這篇文章主要介紹了vue3+ts+axios+pinia實(shí)現(xiàn)無感刷新方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要給大家介紹了關(guān)于vue3中如何使用codemirror6增加代碼提示功能的相關(guān)資料,Codemirror是一個(gè)不錯(cuò)的Web代碼編輯庫,可以方便簡單的集成,需要的朋友可以參考下2023-08-08
vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼
本文主要介紹了vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue進(jìn)度條組件實(shí)現(xiàn)代碼(可拖拽可點(diǎn)擊)
在日常開發(fā)中隨著需求的個(gè)性化,邏輯的復(fù)雜化,自定義組件也變得越來越常見,這篇文章主要給大家介紹了關(guān)于vue進(jìn)度條組件實(shí)現(xiàn)(可拖拽可點(diǎn)擊)的相關(guān)資料,需要的朋友可以參考下2023-12-12