一.表格中有時(shí)候會(huì)有排序的需求，如果只針對(duì)當(dāng)前頁(yè)進(jìn)行排序，那么前端就可以實(shí)現(xiàn)排序，在對(duì)應(yīng)需要排序的字段中，使用sortable字段即可。
<el-table-column
prop="date"
label="日期"
width="180"
sortable //在需要排序的字段中，添加sortable，就可以在前端實(shí)現(xiàn)當(dāng)前頁(yè)中的排序
:default-sort="{prop: 'date', order: 'ascending'}" //default-sort指定的默認(rèn)排序,默認(rèn)用date這一列排序,排序?yàn)樯?默認(rèn)的排序也是升序。這個(gè)語(yǔ)句根據(jù)自己的需求可要可不要。
>
</el-table-column>
二.存在分頁(yè)的情況時(shí)，前端僅僅使用sortable當(dāng)前頁(yè)排序已經(jīng)不能滿足我們的需求，無(wú)法對(duì)所有數(shù)據(jù)進(jìn)行排序。這時(shí)候我們就要使用后端排序。
- 給el-table設(shè)置事件@sort-change=“onSortChange”
<el-table
:data="dataList"
border
style="width: 100%
height="calc(100vh - 250px)"
@sort-change="onSortChange"> //onSortChange為排序發(fā)生改變時(shí)調(diào)用的方法
</el-table>
- 給需要排序的表格設(shè)置屬性sortable=“custom”
<el-table-column
label="操作時(shí)間"
prop="opTime"
sortable="custom" //sortable="custom"表示使用的排序?yàn)楹蠖伺判?/span>
:sort-orders="['ascending', 'descending']" // sort-orders接收一個(gè)數(shù)組,用來(lái)指定點(diǎn)擊可排序表頭時(shí)排列的順序,
> //默認(rèn)是['ascending', 'descending', null]點(diǎn)擊時(shí)先升序ascending,再點(diǎn)擊降序descending,再點(diǎn)擊不排序null,
</el-table-column> //按表格的默認(rèn)索引排.可以自己設(shè)置排列順序 。
//根據(jù)自己的需求可選擇寫不寫這個(gè)語(yǔ)句，不寫則默認(rèn)是['ascending', 'descending', null]
- 聲明 onSortChange()
//點(diǎn)擊時(shí)間排序
onSortChange(column){
console.log("column____________",column); //打印出傳入的column，發(fā)現(xiàn)里面有3個(gè)數(shù)據(jù)
this.listQuery.sortType= column.order === "ascending" ? 1 : column.order === "descending" ? 0 : "" //將sortType設(shè)置為與后端約定的排序值，1為升序，0為降序，null為默認(rèn)不排序
this.getList()
},
打印出傳入的column，發(fā)現(xiàn)里面有3個(gè)數(shù)據(jù)，分別代表的意義是：
column：當(dāng)前列；
order：排序的規(guī)則（升序ascending、降序descenting和默認(rèn)的沒(méi)有排序null）；
prop：表格中排序的字段名。
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-508039.html
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-508039.html
到了這里，關(guān)于Vue Element-ui Table表格排序的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
