antd-vue - - - - - a-table排序

antd-vue - - - - - a-table排序

  • 1. 重點代碼:
  • 2. 代碼示例:
  • 3. 進階版寫法

1. 重點代碼:

sorter: {compare: (a, b) => a.columnsKeys - b.columnsKeys,multiple: 1,
},

解析:
compare: 自定義排序函數,用于比較兩個對象。
multiple: 排序優先級權重(數字越大優先級越高)。

2. 代碼示例:

<template><a-table :columns="columns" :data-source="data" @change="onChange" />
</template>
<script setup>
const columns = [{title: 'Name',dataIndex: 'name',},{title: 'Chinese Score',dataIndex: 'chinese',sorter: {compare: (a, b) => a.chinese - b.chinese,multiple: 3,},},{title: 'Math Score',dataIndex: 'math',sorter: {compare: (a, b) => a.math - b.math,multiple: 2,},},{title: 'English Score',dataIndex: 'english',sorter: {compare: (a, b) => a.english - b.english,multiple: 1,},},
];
const data = [{key: '1',name: 'John Brown',chinese: 98,math: 60,english: 70,type1: 1,type2: 'star',type3: '張三',},{key: '2',name: 'Jim Green',chinese: 98,math: 66,english: 89,type1: 2,type2: 'moon',type3: '李四',},{key: '3',name: 'Joe Black',chinese: 98,math: 90,english: 70,type1: 3,type2: 'sun',type3: '王五',},
];
function onChange(pagination, filters, sorter, extra) {// 監聽表格變化事件,比如分頁、排序、過濾等(回調函數)console.log('params', pagination, filters, sorter, extra);
}
</script>

上述代碼,分別對chinese、math、english三列設置了排序。

  • multiple的值設置的不一樣,數值越大,優先級越高。
  • 比如同時對三列都進行排序,先滿足chinese的篩選條件,再滿足math的篩選條件,再滿足english的篩選條件

3. 進階版寫法

當排序的列類型不僅僅為數字類型時,排序就會出現混亂。解決辦法就是針對不同類型,設置不同的compare。

columns.map(col => {if (['type1'].includes(col.dataIndex)) {// 數值型字段排序return {...col,sorter: {compare:(a, b) => Number(a[col.dataIndex]) - Number(b[col.dataIndex]),multiple: 1}};} else if (['type2'].includes(col.dataIndex)) {// 字符串字段排序return {...col,sorter: (a, b) => a[col.dataIndex].localeCompare(b[col.dataIndex]),};} else {// 默認處理:假設其他列都可以按照字符串比較來排序return {...col,sorter: (a, b) => ('' + a[col.dataIndex]).localeCompare('' + b[col.dataIndex]),};}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/909027.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/909027.shtml
英文地址,請注明出處:http://en.pswp.cn/news/909027.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【AI】模型vs算法(以自動駕駛為例)

模型vs算法&#xff08;以自動駕駛為例&#xff09; 一、自動駕駛的核心任務二、以自動駕駛為例&#xff0c;模型vs算法的實際分工1. 感知環節&#xff1a;“看懂”周圍環境&#xff08;如識別行人、車道線、車輛&#xff09;2. 預測環節&#xff1a;“預判”其他交通參與者的行…

機器學習與深度學習19-線性代數02

目錄 前文回顧6.協方差矩陣與主成分分析7.矩陣的奇異值分解8.神經網絡的前向傳播和反向傳播9.矩陣的跡10.特征工程的多項式特征擴展 前文回顧 上一篇文章鏈接&#xff1a;地址 6.協方差矩陣與主成分分析 協方差矩陣是一個對稱矩陣&#xff0c;用于衡量隨機變量之間的線性相關…

青藏高原ASTER_GDEM數據集(2011)

共享方式&#xff1a;開放獲取數據大小&#xff1a;73.69 GB數據時間范圍&#xff1a;2012-04-08 — 2012-05-08元數據更新時間&#xff1a;2021-10-15 數據集摘要 ASTER Global Digital Elevation Model &#xff08;ASTER GDEM&#xff09;是美國航空航天局 &#xff08;NAS…

代碼隨想錄訓練營二十六天| 654.最大二叉樹 617.合并二叉樹 700.二叉搜索樹的搜索 98.驗證二叉搜索樹

654.最大二叉樹&#xff1a; 文檔講解&#xff1a;代碼隨想錄|654.最大二叉樹 視頻講解&#xff1a;又是構造二叉樹&#xff0c;又有很多坑&#xff01;| LeetCode&#xff1a;654.最大二叉樹_嗶哩嗶哩_bilibili 狀態&#xff1a;已做出 思路&#xff1a; 這道題目要求使用給定…

臨時抱佛腳v2

術語解釋 多范式 (Multi-paradigm) 指支持多種編程范式&#xff0c;如面向對象編程和函數式編程&#xff0c;允許開發者根據需求選擇最合適的風格。 函數式編程 (Functional Programming) 一種編程范式&#xff0c;將計算視為數學函數的求值&#xff0c;強調不變性、無副作用…

MCGS和1200plc變量表格式編輯

設備編輯窗口---設備信息導出---另存為xx.CSV文件 在上面導出的表格基礎上編輯 本體位的編輯&#xff1a; db數據塊位編輯 db數據塊int類型 (4.14應改為4.140,0不省略) db數據塊real類型 通道號&#xff0c;地址均按順序排列 &#xff0c;寄存期地址最后一位0不能省略&#…

Android高性能音頻與圖形開發:OpenSL ES與OpenGL ES最佳實踐

引言 在移動應用開發中&#xff0c;音頻和圖形處理是提升用戶體驗的關鍵要素。本文將深入探討Android平臺上兩大核心多媒體API&#xff1a;OpenSL ES&#xff08;音頻&#xff09;和OpenGL ES&#xff08;圖形&#xff09;&#xff0c;提供經過生產環境驗證的優化實現方案。 …

GaussDB分布式數據庫調優方法總結:從架構到實踐的全鏈路優化指南

GaussDB分布式數據庫調優方法總結&#xff1a;從架構到實踐的全鏈路優化指南 GaussDB作為華為自主研發的分布式數據庫&#xff0c;基于MPP&#xff08;大規模并行處理&#xff09;架構設計&#xff0c;支持存儲與計算分離、列存/行存混合引擎、向量化執行等核心技術&#xff0…

NLP學習路線圖(三十九):對話系統

在人工智能領域,自然語言處理(NLP)無疑是推動人機交互革命的核心引擎。當清晨的鬧鐘響起,你輕聲一句“小愛同學,關掉鬧鐘”;當開車迷路時說“嘿Siri,導航到最近加油站”;當深夜向客服機器人詢問訂單狀態時——我們已在不知不覺中與對話系統建立了千絲萬縷的聯系。這類系…

Cambridge Pixel為警用反無人機系統(C-UAS)提供軟件支持

警用 C-UAS 系統受益于 Cambridge Pixel 和 OpenWorks Engineering 的技術合作。 作為雷達數據處理和雷達目標跟蹤的專家公司&#xff0c;Cambridge Pixel宣布與OpenWorks Engineering 合作&#xff0c;為警用系統提供先進的C-UAS系統。OpenWorks Engineering以創新的光學系統和…

【ArcGIS Pro微課1000例】0072:如何自動保存編輯內容及保存工程?

文章目錄 一、自動保存編輯內容二、自動保存工程在使用ArcGIS或者ArcGIS Pro時,經常會遇到以下報錯,無論點擊【發送報告】,還是【不發送】,軟件都會強制退出,這時如果對所操作沒有保存,就會前功盡棄。 此時,自動保存工作就顯得尤為重要,接下來講解兩種常見的自動保存方…

進行性核上性麻痹健康護理指南:全方位照護之道

進行性核上性麻痹&#xff08;PSP&#xff09;是一種罕見的神經系統變性疾病&#xff0c;會嚴重影響患者的生活質量。做好健康護理&#xff0c;能在一定程度上緩解癥狀&#xff0c;提高患者生活質量。 ?飲食護理是基礎。患者常伴有吞咽困難&#xff0c;飲食應選擇質地均勻、易…

第二節:Vben Admin v5 (vben5) Python-Flask 后端開發詳解(附源碼)

目錄 前言項目準備項目結構應用創建應用工廠`vben5-admin-backend/app/__init__.py` 文件`vben5-admin-backend/app/config.py` 文件`vben5-admin-backend/app/.env` 文件`vben5-admin-backend/app/logging_config.py` 文件`vben5-admin-backend/app/start.py` 文件`vben5-admi…

從零打造前沿Web聊天組件:從設計到交互

作者現在制作一款網頁端聊天室&#xff08;青春版&#xff09;&#xff0c;之前一直有這個想法&#xff0c;現在總算是邁出了第一步開始制作了… 雄關漫道真如鐵&#xff0c;而今邁步從頭越&#xff01; 啟程 當前已經完成左側聊天室列表顯示&#xff0c;通過http://localhos…

計算機網絡 : 傳輸層協議UDP與TCP

計算機網絡 &#xff1a; 傳輸層協議UDP與TCP 目錄 計算機網絡 &#xff1a; 傳輸層協議UDP與TCP引言1. 傳輸層協議UDP1.2 UDP協議段格式1.3 UDP的特點1.4 面向數據報1.5 UDP的緩沖區1.6 基于UDP的應用層協議及使用注意事項 2. 傳輸層協議TCP2.1 再談端口號2.2 TCP協議段格式2.…

Java高頻面試之并發編程-27

hello啊&#xff0c;各位觀眾姥爺們&#xff01;&#xff01;&#xff01;本baby今天又來報道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面試&#xff1a;詳細說說AtomicInteger 的原理 AtomicInteger 的原理詳解 AtomicInteger 是 Java 并發包 (java.util.concurrent.atomic)…

冒險島的魔法果實-多重背包

問題描述 在冒險島的深處&#xff0c;小萌探索到了一個傳說中的魔法果實園。這里滿是各種神奇的魔法果實&#xff0c;吃了可以增加不同的魔法能量。 小萌想帶一些魔法果實回去&#xff0c;但是他的背包空間有限。看著這些琳瑯滿目的魔法果實&#xff0c;小萌很是糾結&#xf…

atomicity of memory accesses

文章目錄 atomicity of memory accesses? 正確認識原子性的邊界對于 **Load**&#xff1a;? 正確的原子性邊界是&#xff1a;對于 **Store**&#xff1a;? 正確的原子性邊界是&#xff1a; &#x1f504; 修正原文中的說法&#xff08;對照分析&#xff09;? 原子性邊界最終…

VScode安裝配置PYQT6

開始是準備安裝PYQT5的&#xff0c;但是安裝不下去&#xff0c;就改成安裝PYQT6 一.安裝pyqt5&#xff0c;成功。 c:\PYQT>pip install pyqt5 Defaulting to user installation because normal site-packages is not writeable Collecting pyqt5 Downloading PyQt5-5.15.…

SpringBoot使用oshi獲取服務器相關信息

概念 OSHI是Java的免費基于JNA的&#xff08;本機&#xff09;操作系統和硬件信息庫。它不需要安裝任何其他本機庫&#xff0c;并且旨在提供一種跨平臺的實現來檢索系統信息&#xff0c;例如操作系統版本&#xff0c;進程&#xff0c;內存和CPU使用率&#xff0c;磁盤和分區&a…