可拖动表格

支持行拖动,列拖动

插件:sortablejs   

UI: elementUI 

<template><div><hr style="margin: 30px 0;"><div><!-- 数据里面要有主键id, 否则拖拽异常 --><h2 style="margin-bottom: 30px">【sortablejs】实现行拖拽和列拖拽</h2><el-table :data="tableData" row-key="id" border style="width: 50%"><el-table-columnv-for="(item, index) in colList"align="center"show-overflow-tooltip:key="`col_${index+1}`":prop="dropCol[index].prop":label="item.label":min-width="item.minWidth":class-name="item.className":fixed="item.fixed"><template v-if="item.prop =='setting'"><slot :name="item.prop" slot-scope="scope"><!-- 加上这列,如果不固定到右侧,会使得列拖拽异常 --><!-- 右侧固定列不动   应该有特殊写法 --><el-button size="mini">编辑{{scope.setting}}</el-button></slot></template></el-table-column></el-table></div></div>
</template><script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
import { mapState } from 'vuex';
export default {components: {draggable,},data() {return {dropCol: [{label:'日期',prop: 'date'},{label:'姓名',prop:'name'},{label:'地址',prop: 'address'},{label:'操作',prop: 'setting',width: 120}],colList: [//多写了一个,和上面dropCol相同,为了防止列拖拽时数据不跟随{label:'日期',prop: 'date'},{label:'姓名',prop:'name'},{label:'地址',prop: 'address'},{label:'操作',prop: 'setting',width: 120,className: 'disabled',fixed: 'right'//固定到右侧,否则列拖拽异常}],tableData: [{date: "2016-05-03",name: "A",address: "No. 189, Grove St, Los Angeles",id: 1,setting: 'setting1'},{date: "2016-05-02",name: "B",address: "No. 189, Grove St, Los Angeles",id: 2,setting: 'setting2'},{date: "2016-05-04",name: "C",address: "No. 189, Grove St, Los Angeles",id: 3,setting: 'setting3'},{date: "2016-05-01",name: "D",address: "No. 189, Grove St, Los Angeles",id: 4,setting: 'setting4'},],};},mounted(){this.rowDrop()this.columnDrop()},methods: {rowDrop(){//行拖拽const tbody = document.querySelector('.el-table__body-wrapper tbody');const _this = this;Sortable.create(tbody,{animation: 180,delay: 0,onEnd({ newIndex, oldIndex }){const currRow = _this.tableData.splice(oldIndex, 1)[0];console.log(currRow,currRow.name)_this.tableData.splice(newIndex, 0, currRow)console.log('_this.tableData',_this.tableData)}})},columnDrop(){//列拖拽const theader = document.querySelector('.el-table__header-wrapper tr');this.sortable = Sortable.create(theader,{animation: 180,filter: '.disabled',onEnd: e=> {const oldItem = this.dropCol[e.oldIndex];this.dropCol.splice(e.oldIndex, 1);this.dropCol.splice(e.newIndex, 0, oldItem)}})}},
};
</script><style lang="less" scoped>
.drag-resize{height: 400px;width: 100%;background: rgb(196, 196, 139);border: 1px solid #888;border-radius: 2px;position: relative;//不设置这个,被拖拽的元素就跑外面去了
}
.drag-element-seat{width: 100%;height: 100%;
}
</style>

 

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

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

相关文章

打开谷歌浏览器远程调试功能

谷歌浏览器远程调试功能 首先我们来启动Chrome的远程调试端口。你需要找到Chrome的安装位置&#xff0c;在Chrome的地址栏输入chrome://version就能找到Chrome的安装路径 开启远程控制命令 文件路径/chrome.exe --remote-debugging-port9222开启后的样子(注意要关闭其他谷歌浏…

Qt快捷键

#include //注意&#xff0c;头文件一定要添加 QT提供了一个很有用的调试方式&#xff1a;断点调试。这使用户可以轻易地看到自己某个部分的调试结果。下面是使用方法&#xff1a; 按下F5或者左侧的在这里插入图片描述进入调试模式&#xff0c;然后在代码的左侧设置断点 一:断…

MFC网络编程简单例程

目录 一、关于网络的部分概念1 URL(网址)及URL的解析2 URL的解析3 域名及域名解析3 IP及子网掩码4 什么是Web服务器5 HTTP的基本概念6 Socket库概念7 协议栈8 Socket库收发数据基本步骤 二、基于TCP的网络应用程序三、基于UDP的网络应用程序 一、关于网络的部分概念 1 URL(网址…

安防视频监控/视频集中存储/云存储平台EasyCVR平台无法播放HLS协议该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

基于 OV5640 摄像头理论知识讲解-成像和采样原理

基于OV2640/ OV5640 的图像采集显示系统系列文章目录&#xff1a; &#xff08;1&#xff09;基于 OV5640 摄像头理论知识讲解-成像和采样原理 &#xff08;2&#xff09;基于 OV5640 摄像头理论知识讲解-数字接口和控制接口 &#xff08;3&#xff09;基于 OV5640 摄像头理论知…

springboot第37集:kafka,mqtt,Netty,nginx,CentOS,Webpack

image.png binzookeeper-server-start.shconfigzookeeper.properties.png image.png image.png 消费 image.png image.png image.png image.png image.png image.png image.png image.png image.png Netty的优点有很多&#xff1a; API使用简单&#xff0c;学习成本低。功能强大…

Pillow:Python的图像处理库(安装与使用教程)

在Python中&#xff0c;Pillow库是一个非常强大的图像处理库。它提供了广泛的图像处理功能&#xff0c;让我们可以轻松地操作图像&#xff0c;实现图像的转换、裁剪、缩放、旋转等操作。此外&#xff0c;Pillow还支持多种图像格式的读取和保存&#xff0c;包括JPEG、PNG、BMP、…

db2迁移至oracle

1.思路 &#xff08;1&#xff09;用java连接数据库&#xff08;2&#xff09;把DB2数据导出为通用的格式如csv&#xff0c;json等&#xff08;3&#xff09;导入其他数据库&#xff0c;比如oracle&#xff0c;mongodb。这个方法自由发挥的空间比较大。朋友说他会用springboot…

BananaPi BPI-6202工业控制板全志科技A40i、24V DC输入、RS485接口

Banana Pi BPI-6202“嵌入式单板计算机”采用工业级全志A40i四核Cortex-A7处理器&#xff0c;工业温度范围和长生命周期&#xff0c;2GB DDR3&#xff0c;8GB eMMC闪存&#xff0c;M.2 SATA插槽等。 这是自 Banana Pi去年推出Banana Pi BPI-M2 Ultra SBC 和BPI-M2 Berry以来&am…

算法通关村第8关【黄金】| 寻找祖先问题

思路&#xff1a;递归三部曲 第一步&#xff1a;确定参数和返回值 题目要求找到指定的结点&#xff0c;就需要返回结点。 题目又涉及到p,q就需要传入p,q&#xff0c;需要遍历传入root 第二步&#xff1a;确定终止条件 当遍历到结点为空说明到底没找到返回空 或者遍历到p,…

华为云新生代开发者招募

开发者您好&#xff0c;我们是华为2012UCD的研究团队 为了解年轻开发者的开发现状和趋势 正在邀请各位先锋开发者&#xff0c;与我们进行2小时的线上交流&#xff08;江浙沪附近可线下交流&#xff09; 聊聊您日常开发工作中的产品使用需求 成功参与访谈者将获得至少300元京…

Xshell7和Xftp7的下载、安装及连接服务器的教程

1.下载 1.官网地址&#xff1a; XSHELL - NetSarang Website 选择学校免费版下载 2.将XSHELL和XFTP全都下载下来 2.安装 安装过程就是选择默认选项&#xff0c;然后无脑下一步 3.连接服务器 1.打开Xshell7&#xff0c;然后新建会话 2.填写相关信息 出现Connection establ…

【算法】双指针求解盛最多水的容器

Problem: 11. 盛最多水的容器 文章目录 题目解析算法原理讲解复杂度Code 题目解析 首先我们来解析一下本题 题目中说到&#xff0c;要找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 那我们现在来看最外侧的两根&#xff0c;一个高度为8&#…

Databend 开源周报第 108 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 多源数据目录 …

无涯教程-Android - Intents/Filters

Android Intent 是要执行的操作的抽象描述。它可以与 startActivity 一起启动Activity&#xff0c;将 broadcastIntent 发送给任何BroadcastReceiver组件&#xff0c;并与 startService(Intent)或 bindService(Intent&#xff0c;ServiceConnection&#xff0c;int)与后台服务进…

华硕笔记本摄像头倒置怎么办?华硕笔记本摄像头上下颠倒怎么调整

笔记本电脑相较于台式电脑&#xff0c;更易携带&#xff0c;解决了很大一部分人的使用需求。但是笔记本电脑也存在很多不足&#xff0c;比如华硕笔记本电脑就经常会出现摄像头倒置的错误&#xff0c;出现这种问题要如何修复呢&#xff1f;下面就来看看详细的调整方法。 华硕笔记…

centos安装Nginx配置Nginx

1. 查看操作系统有没有安装Nginx which nginx 2. 使用epel的方式进行安装&#xff08;方法二&#xff09; 先安装epel sudo yum install yum-utils 安装完成后&#xff0c;查看安装的epel包即可 sudo yum install epel 3 开始安装nginx 上面的两个方法不管选择哪个&…

MySQL官网下载安装包

MySQL官网&#xff1a; MySQL MySQL 8.0官网下载地址&#xff1a; MySQL :: Download MySQL Community Server 2023-07-18 MySQL 8.1.0 发布&#xff0c;这是 MySQL 变更发版模型后的第一个创新版本 (Innovation Release) 。 如果在官网中找不到下载位置&#xff0c;点击第二个…

算法面试-深度学习面试题整理(2024.8.29开始,每天下午持续更新....)

一、无监督相关&#xff08;聚类、异常检测&#xff09; 1、常见的距离度量方法有哪些&#xff1f;写一下距离计算公式。 1&#xff09;连续数据的距离计算&#xff1a; 闵可夫斯基距离家族&#xff1a; 当p 1时&#xff0c;为曼哈顿距离&#xff1b;p 2时&#xff0c;为欧…

新建Spring Boot项目

使用IDEA 来创建: 文件-新建-项目 填写项目元数据 选择依赖项 此处可以先选 web-spring web 关于这些依赖项&#xff0c;更多可参考&#xff1a; IDEA创建Spring boot项目时各依赖的说明&#xff08;Developer Tools篇&#xff09;[1] 项目结构介绍 展开项目&#xff0c;此时…