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