el-table-draggable拖拽實現表格內容排序

1、圖片

2、安裝包

import ElTableDraggable from "el-table-draggable";

3、代碼(html)

 <el-table-draggable:data="soloTableData"@input="dragInputHandlerSolo"><el-table:data="soloTableData"row-key="id"style="width: 100%":default-sort="{ prop: 'date', order: 'descending' }"height="538"><el-table-columntype="index"label="序號"align="center"width="60"></el-table-column><el-table-columnprop="dismountingSequence"label="拆卸序列"align="center"></el-table-column></el-table></el-table-draggable>

4、代碼(script)

      // 裝配編號parts: [// "護欄",// "1個煙霧發射裝置",// "1組(4個)煙霧發射裝置",// "蓋板",// "散熱蓋",// "隔板",// "右齒套",// "左齒套",// "柴油管路",// "高壓配電箱電纜",// "冷卻系統管路",// "抽塵管路",// "發動機固定螺栓",// "綜合傳動裝置固定螺栓",// "排煙管路",// "動力系統",],// 單人數據列表soloTableData: [// {//   id: 1,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A07->A08->A09->A10->A11->A12->A13->A14->A15",// },// {//   id: 2,//   dismountingSequence://     "A02->A01->A03->A04->A05->A06->A07->A08->A09->A10->A11->A12->A13->A14->A15",// },// {//   id: 3,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A08->A09->A10->A11->A12->A13->A14->A15->A07",// },// {//   id: 4,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A09->A10->A11->A12->A13->A14->A15->A07->A08",// },// {//   id: 5,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A10->A11->A12->A13->A14->A15->A07->A08->A09",// },// {//   id: 6,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A11->A12->A13->A14->A15->A07->A08->A09->A10",// },// {//   id: 7,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A12->A13->A14->A15->A07->A08->A09->A10->A11",// },// {//   id: 8,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A13->A14->A15->A07->A08->A09->A10->A11->A12",// },// {//   id: 9,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A14->A15->A07->A08->A09->A10->A11->A12->A13",// },// {//   id: 10,//   dismountingSequence://     "A01->A02->A03->A04->A05->A06->A15->A07->A08->A09->A10->A11->A12->A13->A14",// },],

5、代碼

    dragInputHandlerSolo(newData) {this.soloTableData = newData;},

6、注意事項

el-table中需添加row-key=“id”,數據中必須有id作為唯一字段。

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

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

相關文章

Linux設備模型技術路線圖

Linux設備模型涉及的技術和知識點 1. 核心架構組件 1.1 Kobject 子系統 kobject(內核對象):Linux設備模型的基礎構建塊 kset(對象集合):kobject的容器,管理相同類型的對象 ktype(對象類型):定義kobject的行為和屬性 引用計數機制:使用kref管理對象生命周期 對象層…

面試問題詳解六:元對象系統調用槽函數

Qt 的 元對象系統&#xff08;Meta-Object System&#xff09; 是 Qt 核心機制之一&#xff0c;正是它讓 C 語言具備了類似腳本語言&#xff08;如 Python&#xff09;的反射、動態綁定、屬性系統等能力。 自定義信號與槽&#xff0c;是 Qt 元對象系統最常見、最實用的體現。&a…

Scala面試題及詳細答案100道(1-10)-- 基礎語法與數據類型

《前后端面試題》專欄集合了前后端各個知識模塊的面試題,包括html,javascript,css,vue,react,java,Openlayers,leaflet,cesium,mapboxGL,threejs,nodejs,mangoDB,SQL,Linux… 。 前后端面試題-專欄總目錄 文章目錄 一、本文面試題目錄 1. 簡述Scala與Java的主要…

http請求有哪些?

TTP請求方法常見方法&#xff1a;GET&#xff1a;獲取資源&#xff0c;參數通過URL傳遞&#xff0c;可緩存到瀏覽器本地。POST&#xff1a;提交數據&#xff0c;參數通過請求體傳遞&#xff0c;不可緩存&#xff0c;常用于創建資源。PUT&#xff1a;更新資源&#xff0c;參數通…

MAPGIS6.7地質編錄

1.編錄文件excel位于D:\mapgis67\program\section&#xff0c;文件名稱&#xff1a;ZKInfoEdit.xls2生成副本&#xff0c;復制ZKInfoEdit.xls到桌面3開始編寫 04回次4開始編寫 03編錄5開始編寫 11采樣6開始編寫 06標志面7開始編寫 10鉆孔資料8 最后總結 …

輕松掌握Chrome插件開發全流程

Chrome插件開發概述介紹Chrome插件的基本概念、核心功能和應用場景&#xff0c;包括插件與瀏覽器擴展的區別、插件的主要組成部分&#xff08;如manifest文件、后臺腳本、內容腳本等&#xff09;。開發環境搭建列出開發Chrome插件所需的工具和環境配置&#xff0c;包括Chrome瀏…

智能二維碼QR\刷IC卡\人臉AI識別梯控系統功能設計需基于模塊化架構,整合物聯網、生物識別、權限控制等技術,以下是多奧分層次的系統設計框架

一、系統架構設計硬件層主控模塊&#xff1a;32位ARM嵌入式處理器&#xff0c;支持CAN/RS485/TCP/IP協議識別終端&#xff1a;支持IC卡(CPU/國密/HID)、二維碼掃碼器(動態碼)、人臉識別(活體檢測)電梯控制單元&#xff1a;繼電器矩陣控制板&#xff0c;支持20層以上電梯按鈕控制…

Kubernetes配置與密鑰管理深度指南:ConfigMap與Secret企業級實踐

目錄 專欄介紹 作者與平臺 您將學到什么&#xff1f; 學習特色 Kubernetes配置與密鑰管理深度指南&#xff1a;ConfigMap與Secret企業級實踐 一、 配置管理&#xff1a;云原生應用的基石 1.1 配置管理的演進與挑戰 1.2 ConfigMap與Secret的設計哲學 二、 ConfigMap深度…

知行社黃劍杰:金融跨界,重塑震區救援新章

曾在紐約證券交易所敲響上市鐘聲的黃劍杰&#xff0c;這位知行社的靈魂人物&#xff0c;此次在西藏震區開啟了一場震撼人心的“跨界救援”之旅。他帶著在華爾街積累的深厚金融智慧&#xff0c;毅然投身到這場與時間賽跑、與災難較量的戰斗中&#xff0c;為傳統救災模式帶來了顛…

API模型與接口棄用指南:歷史、替代方案及開發者應對策略

API模型及接口棄用&#xff08;Deprecation&#xff09;全解 概覽 在AI與API領域&#xff0c;模型的持續迭代與技術進步推動著平臺不斷優化服務。與此同時&#xff0c;隨著更安全、更強大的新模型推出&#xff0c;舊模型與接口的棄用&#xff08;Deprecation&#xff09;成為…

python3GUI--Joy音樂播放器 在線播放器 播放器 By:PyQt5(附下載地址)

文章目錄一&#xff0e;前言二&#xff0e;項目簡介三&#xff0e;詳細模塊介紹1.主界面2.歌單廣場3.歌單詳情頁4.歌手篩選5.歌手詳情頁6.專輯詳情頁7.歌曲榜單頁8.搜索結果頁9.其他1.托盤菜單2.設置四&#xff0e;核心問題回答1.軟件UI效果實現2.為什么我做不出來這么漂亮的界…

Spring Boot整合Feign實現RPC調用,并通過Hystrix實現服務降級

feign/openfeign和dubbo是常用的微服務RPC框架&#xff0c;由于feigin內部已經集成ribbon&#xff0c;自帶了負載均衡的功能&#xff0c;當有多個同名的服務注冊到注冊中心時&#xff0c;會根據ribbon默認的負載均衡算法將請求分配到不同的服務。這篇文章就簡單介紹一下怎么使用…

Java 性能優化實戰(三):并發編程的 4 個優化維度

在多核CPU時代&#xff0c;并發編程是提升Java應用性能的關鍵手段&#xff0c;但不合理的并發設計反而會導致性能下降、死鎖等問題。本文將聚焦并發編程的四個核心優化方向&#xff0c;通過真實案例和代碼對比&#xff0c;帶你掌握既能提升性能又能保證線程安全的實戰技巧。 一…

【秋招筆試】2025.08.19百度秋招機考第一套

?? 點擊直達筆試專欄 ??《大廠筆試突圍》 ?? 春秋招筆試突圍在線OJ ?? 筆試突圍在線刷題 bishipass.com 題目一:花園路徑優化問題 1??:使用棧維護必須保留的觀景點,基于三角不等式判斷 2??:貪心策略,檢查中間點是否為"轉折點" 3??:時間復雜度 …

SmartX 用戶建云實踐|某人壽保險:從開發測試、核心生產到信創轉型,按需推進企業云建設

某人壽保險自 2018 年起開始探索基于 SmartX 超融合架構搭建私有云 IaaS 資源池&#xff0c;先后部署了開發測試業務、生產業務和重要生產業務的 Oracle 數據庫&#xff08;含 RAC&#xff09;&#xff0c;并探索了基于海光芯片的信創云搭建&#xff0c;最終以基于超融合架構的…

通道注意力機制|Channel Attention Neural Network

一、通道注意力機制 論文&#xff1a;ECA-Net: Efficient Channel Attention for Deep Convolutional Neural Networks 近年來&#xff0c;通道注意力機制在提高深度卷積神經網絡CNN的性能方面顯示出了巨大潛力。然而&#xff0c;大多數現有方法致力于開發更復雜的注意力模塊&a…

構建包含IK插件(中文分詞插件)的Elasticsearch鏡像

#!/bin/bash# 定義變量 ES_VERSION"8.15.3" IMAGE_NAME"elasticsearch-with-ik:${ES_VERSION}" IK_PLUGIN_DIR"./elasticsearch-analysis-ik-${ES_VERSION}" DOCKERFILE_NAME"Dockerfile.es-ik"# 檢查IK插件目錄是否存在 if [ ! -d &q…

Linux虛擬機安裝FTP

文章目錄深入理解FTP&#xff1a;從原理到實戰配置&#xff08;以VSFTP為例&#xff09;一、FTP基礎&#xff1a;你需要知道的核心概念1.1 什么是FTP&#xff1f;1.2 FTP的“雙端口”機制1.3 為什么選擇VSFTP&#xff1f;二、FTP的兩種工作模式&#xff1a;主動與被動2.1 主動模…

開源版CRM客戶關系管理系統源碼包+搭建部署教程

在數字化轉型的浪潮下&#xff0c;客戶關系管理&#xff08;CRM&#xff09;成為企業提升競爭力的關鍵工具。為滿足開發者和企業對個性化 CRM 系統的需求&#xff0c;分享一款開源版 CRM 客戶關系管理系統&#xff0c;其源碼涵蓋前臺、后臺及 Uniapp 源代碼&#xff0c;支持快速…

基于“R語言+遙感“水環境綜合評價方法技術應用——水線提取、水深提取、水溫提、水質提取、水環境遙感等

一&#xff1a;R語言1.1 R語言特點&#xff08;R語言&#xff09;1.2 安裝R&#xff08;R語言&#xff09;1.3 安裝RStudio&#xff08;R語言&#xff09;&#xff08;1&#xff09;下載地址&#xff08;2&#xff09;安裝步驟&#xff08;3&#xff09;軟件配置1.4 第一個程序…