vue3中實現elementPlus表格選中行的上移下移

先看效果:

實現步驟:

1、給el-table添加current-change事件、高亮屬性及ref屬性

?

2、給上移下移按鈕添加事件

// 定義當前選中的行參數
const currentRow = ref<any>(null);
// 定義表格的ref
const singleTableRef = ref();
// 行選中事件
const handleCurrentChange = (val: any) => {currentRow.value = val;
};// curcelRight.value.fields是表格數據
// 上移事件
const upRow = () => {if (currentRow.value) {// 在表格數據中找到當前選中行的索引let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code);// 索引存在if (index && index > 0) {// 則利用es6中的解構賦值來實現交換兩元素的位置[curcelRight.value.fields[index], curcelRight.value.fields[index - 1]] = [curcelRight.value.fields[index - 1],curcelRight.value.fields[index],];}// setCurrentRow中傳入當前行可以實現不清除選中效果,可以多次上移singleTableRef.value.setCurrentRow(currentRow.value);}
};
// 下移事件
const downRow = () => {if (currentRow.value) {let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code);if (index + 1 != curcelRight.value.fields.length) {if (index > -1 && curcelRight.value.fields.length > 1) {[curcelRight.value.fields[index], curcelRight.value.fields[index + 1]] = [curcelRight.value.fields[index + 1],curcelRight.value.fields[index],];}singleTableRef.value.setCurrentRow(currentRow.value);}}
};

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

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

相關文章

正信晟錦:借了錢的人一直不接電話不回信息咋辦

在金錢往來中&#xff0c;遇到借出的錢款無法按時回收&#xff0c;且借款人如同人間蒸發一般不接電話、不回信息&#xff0c;確實讓人焦慮。面對這種情形&#xff0c;我們需采取明智而有效的措施&#xff0c;以保護自身的權益。 首要策略是保持冷靜&#xff0c;不要讓情緒主導行…

四、《任務列表案例》后端程序實現和測試

本章概要 準備工作功能實現前后聯調 4.1 準備工作 數據庫腳本 CREATE TABLE schedule (id INT NOT NULL AUTO_INCREMENT,title VARCHAR(255) NOT NULL,completed BOOLEAN NOT NULL,PRIMARY KEY (id) );INSERT INTO schedule (title, completed) VALUES(學習java, true),(學…

【前端素材】推薦優質在線高端蜂蜜商城電商網頁Beejar平臺模板(附源碼)

一、需求分析 1、系統定義 在線高端蜂蜜商城是指一個專門銷售高品質、高端蜂蜜產品的電子商務平臺。這種商城致力于向消費者提供各種經過精心挑選、具有高營養價值和健康功效的蜂蜜產品。 2、功能需求 在線高端蜂蜜商城是指一個專門銷售高品質、高端蜂蜜產品的電子商務平臺…

Go字符串實戰操作大全!

目錄 1. 引言文章結構概覽 2. Go字符串基礎字符串的定義與特性什么是字符串&#xff1f;Go字符串的不可變性原則 字符串的數據結構Go字符串的內部表達byte和rune的簡介 3. 字符串操作與應用3.1 操作與應用字符串連接字符串切片字符串查找字符串比較字符串的替換字符串的大小寫轉…

vos3000外呼系統警告消除怎么設置

你有沒有發現vos3000登陸時老是提示告警&#xff0c;消除一會又出現&#xff0c;那么又什么辦法能解決呢&#xff1f;要徹底消除 VOS3000 系統的警告&#xff0c;一般需要通過以下步驟來進行排查和解決&#xff1a; 確認警告信息&#xff1a;首先要明確警告的具體內容和出現的條…

舊的Spring Security OAuth已停止維護,全面擁抱最新解決方案Spring SAS

Spring Authorization Server 替換 Shiro 指引 背景 Spring 團隊正式宣布 Spring Security OAuth 停止維護&#xff0c;該項目將不會再進行任何的迭代 目前 Spring 生態中的 OAuth2 授權服務器是 Spring Authorization Server 已經可以正式生產使用作為 SpringBoot 3.0 的最新…

c++異常機制(3) -- 異常類型和生命周期

目錄 拋出的異常類型大致可以分為三種。 第一種 基本類型 1. 可以直接拋出常量 2. 也可以拋出定義好的變量 3. 如果我們使用const&#xff0c;會不會影響到異常的匹配。 第二種 字符串類型以及指針類型 1. 使用字符指針 注意: 2. 使用string類型 第三種 …

計算機專業大學生的簡歷,為何會出現在垃圾桶

為什么校招過后垃圾桶里全是簡歷&#xff0c;計算機專業的學生找工作有多難&#xff1f; 空哥這么跟你說吧&#xff0c;趁現在還來得及&#xff0c;這些事情你一定要聽好了。 第一&#xff0c;計算機專業在學校學的東西是非常有限的&#xff0c;985211的還好&#xff0c;如果…

GPS歷史軌跡優化算法的研究與實現

GPS歷史軌跡優化算法的研究與實現 摘要 本研究提出了一種綜合利用數據清洗、密度聚類、卡爾曼濾波和地圖匹配的新算法,命名為“DSKF-Match”。該算法旨在處理GPS軌跡數據,通過清洗、聚類、平滑和匹配等步驟,提高數據的質量和準確性。首先,算法利用時間窗口法進行數據清洗…

D365:LookUp

文章目錄 前言一、復制onLookUp事件方法二、LookUp方法 前言 在Form的字段的onLookUp方法中&#xff0c;添加下拉框。 一、復制onLookUp事件方法 二、LookUp方法 [FormControlEventHandler(formControlStr(EcoResProductDetailsExtended, VyaKeyItemType_VyaMaterialSubCode…

Vue2:路由守衛實現權限管理之獨享路由守衛

一、情景說明 單獨給某個路由組件配置守衛 二、案例 給news路由配置獨享路由守衛 在進入該路由組件前&#xff0c;會觸發相關函數 函數內編寫鑒權功能的相關代碼即可 關鍵配置&#xff1a;beforeEnter {name:xinwen,path:news,component:News,meta:{isAuth:true,title:新聞}…

【PyTorch知識點匯總】

PyTorch是一個廣泛使用的深度學習框架&#xff0c;它提供了許多功能強大的工具和函數&#xff0c;用于構建和訓練神經網絡。以下是一些PyTorch的常用知識點和示例說明&#xff1a; 張量&#xff08;Tensors&#xff09; 創建張量&#xff1a;使用torch.tensor()?、torch.Tenso…

面試經典150題——用最少數量的箭引爆氣球

"The only person you are destined to become is the person you decide to be." - Ralph Waldo Emerson 1. 題目描述 2. 題目分析與解析 這個題目開始讀題的時候是有點不好理解題意的&#xff0c;因此我先做個圖讓大家對于題意有更好更直觀的理解再來分析題目。 …

如何使用Portainer創建Nginx容器并搭建web網站發布至公網可訪問【內網穿透】

文章目錄 前言1. 安裝Portainer1.1 訪問Portainer Web界面 2. 使用Portainer創建Nginx容器3. 將Web靜態站點實現公網訪問4. 配置Web站點公網訪問地址4.1公網訪問Web站點 5. 固定Web靜態站點公網地址6. 固定公網地址訪問Web靜態站點 前言 Portainer是一個開源的Docker輕量級可視…

SQL 常見命令及規范

常見命令 1. 查看當前所有數據庫 show databases; 2. 打開指定的庫 use 庫名 ; 3. 查看當前庫的所有表 show tables; 4. 查看其他庫的所有表 show tables from 庫名 ; 5. 創建表 cerate table 表名 ( 列名 列類型&#xff0c; 列名 列類型&#xff0c; ..... …

基于YOLO家族最新模型YOLOv9開發構建自己的個性化目標檢測系統從零構建模型完整訓練、推理計算超詳細教程【以自建數據酸棗病蟲害檢測為例】

在我前面的系列博文中,對于目標檢測系列的任務寫了很多超詳細的教程,目的是能夠讀完文章即可實現自己完整地去開發構建自己的目標檢測系統,感興趣的話可以自行移步閱讀: 《基于官方YOLOv4-u5【yolov5風格實現】開發構建目標檢測模型超詳細實戰教程【以自建缺陷檢測數據集為…

C# OpenVINO Crack Seg 裂縫分割 裂縫檢測

目錄 效果 模型信息 項目 代碼 數據集 下載 C# OpenVINO Crack Seg 裂縫分割 裂縫檢測 效果 模型信息 Model Properties ------------------------- date&#xff1a;2024-02-29T16:35:48.364242 author&#xff1a;Ultralytics task&#xff1a;segment version&…

去掉WordPress網頁圖片默認鏈接功能

既然是wordpress自動添加的&#xff0c;那么我們在上傳圖片到wordpress后臺多媒體的時候&#xff0c;就可以手動改變鏈接指向或者刪除掉&#xff0c;問題是每次都要這么做很麻煩&#xff0c;更別說有忘記的時候。一次性解決這個問題有兩種方法&#xff0c;一種是No Image Link插…

【生成式AI】ChatGPT原理解析(1/3)- 對ChatGPT的常見誤解

Hung-yi Lee 課件整理 文章目錄 誤解1誤解2ChatGPT真正在做的事情-文字接龍 ChatGPT是在2022年12月7日上線的。 當時試用的感覺十分震撼。 誤解1 我們想讓chatGPT講個笑話&#xff0c;可能會以為它是在一個笑話的集合里面隨機地找一個笑話出來。 我們做一個測試就知道不是這樣…

C# Post數據或文件到指定的服務器進行接收

目錄 應用場景 實現原理 實現代碼 PostAnyWhere類 ashx文件部署 小結 應用場景 不同的接口服務器處理不同的應用&#xff0c;我們會在實際應用中將A服務器的數據提交給B服務器進行數據接收并處理業務。 比如我們想要處理一個OFFICE文件&#xff0c;由用戶上傳到A服務器…