表格組件的排序功能,點擊排序表頭可以進行升序和降序進行排序

上代碼

<el-table:data="tableData"style="width: 100%"<!-- 數據由后臺進行排序時sortable="custom",需要監聽排序點擊事件,會返回當前的prop和order -->@sort-change="changeSort"<!-- default-sort指定的默認排序,默認用date這一列排序,排序為升序,默認的排序也是升序 -->:default-sort="{prop: 'date', order: 'ascending'}"border><el-table-columnprop="date"label="日期"<!-- 如果需要對表格的那一列進行排序,加一個sortable參數,可取的值有true,false,custom -->sortable<!-- sort-orders接收一個數組,用來指定點擊可排序表頭時排列的順序,默認是['ascending', 'descending', null]點擊時先升序ascending,再點擊降序descending,再點擊不排序null,按表格的默認索引排.可以自己設置排列順序 -->:sort-orders="['ascending', 'descending']"width="180"></el-table-column><el-table-columnprop="name"label="姓名"<!-- sort-by指定數據按哪個屬性進行排序,如果不指定,就是按這里的prop值排,指定一個時寫成字符串形式:sort-by="name",指定多個時,使用數組.這里的效果就是,當姓名的值全部一樣時,就按address進行排序 -->:sort-by="['name', 'address']"sortablewidth="180"></el-table-column><el-table-columnprop="address"label="地址"<!-- 以上的參數排序都是在已得到的tableData數據上進行排序,如果數據做了分頁當前的數據不是全部的數據時,排序就需要后臺進行排序,這時需要把sortable的值改為custom,在table中用sort-change事件監聽排序點擊事件 -->sortable="custom"></el-table-column> </el-table>methods: {// 從后臺獲取數據,重新排序changeSort (val) {console.log(val) // column: {…} order: "ascending" prop: "date"// 根據當前排序重新獲取后臺數據,一般后臺會需要一個排序的參數} }

總結

以上是生活随笔為你收集整理的工作87：element-ui el-table sortable属性 参数详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。