Vue(二十):ElementUI 扩展实现表格组件的拖拽行

效果

在这里插入图片描述

源码

注意: 表格组件必须添加 row-key 属性,用来优化表格的渲染

<template><el-row :gutter="10"><el-col :span="12"><el-card class="card"><el-scrollbar><span>注意: 表格组件必须添加 row-key 属性,用来优化表格的渲染</span><pre>{{ JSON.stringify(tableData.map(d => JSON.stringify(d)), null, 4) }}</pre></el-scrollbar></el-card></el-col><el-col :span="12"><el-table ref="dragTableRef" style="width: 100%" :data="tableData" border stripe height="calc(100vh - 16px)" row-key="id"><el-table-column type="index" label="序号" width="60" align="center"/><el-table-column prop="id" label="ID" align="center" width="100"/><el-table-column prop="name" label="姓名" header-align="center"/><el-table-column prop="email" label="邮箱" header-align="center"/><el-table-column prop="address" label="地址" header-align="center"/></el-table></el-col></el-row>
</template><script setup>
import {nextTick, reactive, ref} from "vue";
import Sortable from 'sortablejs';const dragTableRef = ref(null);
const tableData = reactive([{id: '01', name: '西乐', email: 'XiLe@126.com', address: '安徽省宜都县普陀路304号'},{id: '02', name: '令玥傲', email: 'LingAo@126.com', address: '广东省六盘水县萧山街423号'},{id: '03', name: '爱宜豪', email: 'AiYiHao@126.com', address: '辽宁省六安县东城街448号'},{id: '04', name: '堵欣欣', email: 'DuXinXin@hotmail.com', address: '乌鲁木齐市高明街32号'},{id: '05', name: '楚文杰', email: 'ChuWenJie@qq.com', address: '四川省台北县吉区街375号'},{id: '06', name: '法晨茜', email: 'FaChenXi@126.com', address: '陕西省荆门县翔安路22号'},{id: '07', name: '凤萌', email: 'FengMeng@126.com', address: '台湾省台北县淄川街150号'},{id: '08', name: '驷尚', email: 'SiShang@hotmail.com', address: '山东省乌鲁木齐市清浦街48号'},{id: '09', name: '房紫轩', email: 'FangZiXuan@qq.com', address: '黑龙江省济南县永川路79号'},{id: '10', name: '丘伟洋', email: 'QiuWeiYang@gmail.com', address: '北京市拉萨市南长路245号'},
]);nextTick(() => {const tableBodyWrapperEl = dragTableRef.value.$el.querySelector('.el-table__inner-wrapper .el-table__body-wrapper');const el = tableBodyWrapperEl.querySelector('.el-table__body tbody');const scrollEl = tableBodyWrapperEl.querySelector('.el-scrollbar .el-scrollbar__wrap');new Sortable(el, {// 被选中项样式选择器chosenClass: 'bg-green',// 基于某标签进行滚动scroll: scrollEl,// 结束拖拽onEnd: e => {console.log(`位置: form ${e.oldIndex} to ${e.newIndex}`);// 位置相同为无效移动if (e.oldIndex === e.newIndex) return;// 获取旧位置数据const [item] = tableData.splice(e.oldIndex, 1);// 移动到新位置tableData.splice(e.newIndex, 0, item);},});
});
</script><style scoped>
.card {height: calc(100vh - 16px);::v-global(.el-card__body) {height: calc(100% - 40px);span {color: red;}}
}
</style><style>
.bg-green td {background-color: green !important;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/662562.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动化测试再升级,大模型与软件测试相结合

近年来&#xff0c;软件行业一直在迅速发展&#xff0c;为了保证软件质量和提高效率&#xff0c;软件测试领域也在不断演进。如今&#xff0c;大模型技术的崛起为软件测试带来了前所未有的智能化浪潮。 软件测试一直是确保软件质量的关键环节&#xff0c;但传统的手动测试方法存…

编写交互式 Shell 脚本

在日常的系统管理和自动化任务中&#xff0c;使用 Shell 脚本可以为我们节省大量时间和精力。 文章将以输入 IP 为例&#xff0c;通过几个版本逐步完善一个案例。 原始需求 编写一个交互式的 Shell 脚本&#xff0c;运行时让用户可以输入IP地址&#xff0c;并且脚本会将输入…

国辰智企TMS定制化模块,实现智慧园区的全面管理

智慧园区综合管理系统是一种针对园区业务场景的高度定制化解决方案&#xff0c;通过选择性部署相应的模块&#xff0c;实现对园区各方面业务的全面管理。通常情况下&#xff0c;园区都需要有效地管理资产、确保安全&#xff0c;以及进行访客预约。这一全面性的系统通过各个模块…

windows 谷歌浏览器Chrome 怎么禁止更新

1.首先把任务管理器里的谷歌浏览器程序结束&#xff1a; &#xff08;鼠标在任务栏右击&#xff0c;出现任务管理器&#xff09; 2.windowr&#xff0c;输入services.msc 带有Google Update的服务&#xff0c;选择禁用。 3.windowr&#xff0c;输入taskschd.msc 任务计划程序…

二叉搜索树,力扣

目录 题目地址&#xff1a; 题目&#xff1a; 我们直接看题解吧&#xff1a; 解题分析&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 代码补充说明&#xff1a; 代码实现(中序遍历)&#xff1a; 题目地址&#xff1a; 98. 验证二叉搜索树 - 力扣&#xff08;LeetCod…

delete、truncate和drop区别

一、从执行速度上来说 drop > truncate >> DELETE 二、从原理上讲 1、DELETE DELETE from TABLE_NAME where xxx1.1、DELETE属于数据库DML操作语言&#xff0c;只删除数据不删除表的结构&#xff0c;会走事务&#xff0c;执行时会触发trigger&#xff08; 触发器…

8. 字符串转换整数 (atoi)-LeetCode(Java)

8. 字符串转换整数 (atoi) 题目&#xff1a;8. 字符串转换整数 (atoi) 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入…

AI大语言模型学习笔记之三:协同深度学习的黑魔法 - GPU与Transformer模型

Transformer模型的崛起标志着人类在自然语言处理&#xff08;NLP&#xff09;和其他序列建模任务中取得了显著的突破性进展&#xff0c;而这一成就离不开GPU&#xff08;图形处理单元&#xff09;在深度学习中的高效率协同计算和处理。 Transformer模型是由Vaswani等人在2017年…

2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测

2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测 目录 2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果…

Git 指令

Git 安装 操作 命令行 简介&#xff1a; Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion …

2024PMP考试新考纲-【业务环境领域】典型真题和很详细解析(2)

华研荟继续分享【业务环境Business Environment领域】在新考纲下的真题&#xff0c;帮助大家体会和理解新考纲下PMP的考试特点和如何应用所学的知识和常识&#xff08;经验&#xff09;来解题&#xff0c;并且举一反三&#xff0c;一次性3A通过2024年PMP考试。 2024年PMP考试新…

准确率90%+!大模型会话洞察平台来了

随着客户行为和需求加速改变&#xff0c;企业与客户在数字渠道沟通并交易的比重大幅提升。企业通过在线客服、社交媒体、短信、语音助手等数字化渠道与客户建立联系的方式&#xff0c;不仅拓宽了沟通途径&#xff0c;更显著提高了服务效率和质量。 与此同时&#xff0c;数字化…

POSIX(包含程序的可移植性) -- 详解

1. 什么是 POSIX 参考链接–知乎 POSIX 标准包含了进程管理、文件管理、网络通信、线程和同步、信号处理等方面的功能。 这些接口定义了函数、数据类型和常量等&#xff0c;为开发者提供了一个可移植的方法来与操作系统进行交互。 2. 谁遵守这个标准 遵守 POSIX 标准的主要是…

蛋氨酸市场调研:预计2029年将达到87亿美元

蛋氨酸&#xff0c;又名甲硫氨酸&#xff0c;化学名称为γ-甲硫基-a-氨基丁酸&#xff0c;是一种参与蛋白质合成的基本结构单位&#xff0c;是人体内八种必需氨基酸之一&#xff0c;同时也是重要的饲料添加剂。蛋氨酸主要用于家禽、猪的饲料添加剂以及药用等。对禽类来说&#…

adb脚本操作

用荣耀80手机测试 echo off setlocal enabledelayedexpansion adb shell am start com.android.settings timeout /t 2 /nobreak >nul adb shell input tap 500 1300 timeout /t 2 /nobreak >nul adb shell input tap 500 800 timeout /t 2 /nobreak >nul adb she…

ElasticSearch搜索与分析引擎-Linux离线环境安装教程

目录 一、下载安装包 网盘链接: 二、安装流程及遇到的问题和解决方案 &#xff08;1&#xff09;JDK安装 &#xff08;2&#xff09;Elasticsearch安装 &#xff08;3&#xff09;Kibana安装 ​&#xff08;4&#xff09;Ik分词器安装 三、启动过程中的问题 &#xff…

linux查看mysql状态重启

1.linux怎么看mysql数据库是不是宕机了&#xff1f; MySQL/MariaDB数据库的状态&#xff1a;使用systemctl status mysql或者service mysqld status命令。如果显示"active (running)"表示MySQL正常运行&#xff1b;如果显示"inactive (dead)"则表示MySQL已…

C语言系列-联合

&#x1f308;个人主页: 会编程的果子君 ​&#x1f4ab;个人格言:“成为自己未来的主人~” 目录 联合体 联合体类型的声明 联合体的特点 相同成员的结构体和联合体对比 联合体大小的计算 联合的一个练习 联合体 联合体类型的声明 像结构体一样&#xff0c;联合体也是由…

NLP深入学习(十二):支持向量机(SVM)

文章目录 0. 引言1. 什么是支持向量机2. 线性 SVM3. 非线性 SVM3.1 推导过程3.2 常用核函数 4. 参考 0. 引言 前情提要&#xff1a; 《NLP深入学习&#xff08;一&#xff09;&#xff1a;jieba 工具包介绍》 《NLP深入学习&#xff08;二&#xff09;&#xff1a;nltk 工具包…

C语言·贪吃蛇游戏(上)

1. 游戏任务 使用C语言在Windows环境的控制台中模拟实现小游戏贪吃蛇 游戏中要包含以下功能&#xff1a; 1. 贪吃蛇地图绘制 2. 贪吃蛇上下左右移动和吃食物 3. 蛇撞墙&#xff0c;或撞到自身死亡 4. 计算得分 5. 蛇身加速、减速 6. 暂停游戏 2. Win32 API 介绍 Windows是一种多…