design vue 表格開啟列排序的操作
更新時間：2020年10月28日 15:48:19 作者：Cookysurongbin
這篇文章主要介紹了design vue 表格開啟列排序的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
開啟排序
1、本地數(shù)據(jù)排序
column數(shù)據(jù)設置，需要開啟的列設置sorter: (a, b) => a.address.length - b.address.length, 自定義排序方法
2、服務端排序sorter設置true
點擊排序，表格觸發(fā)change方法，接受參數(shù)
change (pagination, filters, sorter, { currentDataSource })
第三個參數(shù)就是排序信息
{field, order}
<a-table
:columns="header"
:dataSource="body"
:pagination="pagination"
@change="handleTableChange"
>
methods: {
handleTableChange (pagination, filters, {field, order}) {
this.sort = {
field: field || '',
order: order || ''
}
this.pagination.current = pagination.current
this.getList()
},
}
如何設置第一次點擊是降序
ant design vue 表格排序，默認點擊排序順序是[升序，降序，不排序] 如此循環(huán)
如何設置先降序后升序呢，api文檔有提到
1、可以在column的每一項設置sortDirections: ['descend', 'ascend']
2、在表格直接設置sortDirections
<a-table :columns="header" :dataSource="body" :pagination="pagination" @change="handleTableChange" :sortDirections="['descend', 'ascend']" // 這里 >
3、用['descend' | 'ascend']寫法不行，用數(shù)組['descend', 'ascend']
4、設置defaultSortOrder沒有效果
補充知識：Ant Design Vue實現(xiàn)的表格排序點擊第三次取消排序的解決方法
以上這篇design vue 表格開啟列排序的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue中濫用watch帶來的問題以及如何解決,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
文章介紹了如何在Vue3+Ts項目中使用json-editor-vue3插件,并解決了導入過程中遇到的模塊識別問題,通過步驟說明和代碼示例,展示了如何在項目中成功引入和使用該插件,并提供了一些常見參數(shù)和事件說明2025-01-01
這篇文章主要介紹了Vue組件之間通信的七種方式,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了前端axios取消請求總結示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
使用elementUI表單校驗函數(shù)validate需要注意的坑及解決
這篇文章主要介紹了使用elementUI表單校驗函數(shù)validate需要注意的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
為了方便大家寫代碼，Vue 給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認事件等等，這篇文章將給大家分享Vue 中的常用的修飾符2022-08-08
公司內部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認真的來總結下,下面這篇文章主要給大家介紹了關于如何在vue項目中使用rem布局的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了table表格中使用el-popover 無效問題解決方法,實例只針對單個的按鈕管用在表格里每一列都有el-popover相當于是v-for遍歷了 所以我們在觸發(fā)按鈕的時候并不是單個的觸發(fā)某一個,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue組件化開發(fā)的思考以及相關的原理介紹，如果你對此有興趣，可以學習參考下。2018-02-02
vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象(示例代碼)
在Vue中循環(huán)生成表格數(shù)據(jù)時,可能會遇到數(shù)據(jù)聯(lián)動的現(xiàn)象,即修改一個表格中的數(shù)據(jù)后,其他表格的數(shù)據(jù)也會跟著變化,這種現(xiàn)象通常是因為所有表格的數(shù)據(jù)引用了同一個對象或數(shù)組導致的,本文介紹vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象,感興趣的朋友一起看看吧2024-11-11