vue.draggable拖拽，项目中三个表格互相拖拽的实例操作，前端分页等更多小技巧~

vue.draggable中文文档 - itxst.com官网在这里，感兴趣的小伙伴可以看看。

NPM或yarn安装方式

yarn add vuedraggable
npm i -S vuedraggable

UMD浏览器直接引用JS方式

<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

导入组件

import draggable from 'vuedraggable'

//注册draggable组件

components: { draggable, }

首先记录一下我的项目功能需求，是三个表格可以互相拖动，我主要还是看的多列拖动的案列。vue.draggable两列或多列之间相互拖动 - itxst.com

多列组件拖动设置相同的group名就可以相互拖拽了这是大家需要知道的一点

其次就是group包含是什么，取一个name，在pull,put里面就标记可以拖出/入/拷贝

 tableA: {name: "itxst",pull: true, //可以拖出put: true //可以拖入},

最后就是拖动的数据结构要一致，什么意思呢？通俗来说是在一个表里面姓名这个字段用的是name,另外一张表的姓名字段用的是xm,那么这条数据的拖动就是有问题的~感兴趣的朋友可以自行试验。以下是我的代码，有拖拽和前端表格分页的联合使用，会稍微复杂一些些。

表一的vue如下所示：这里由于工作的关系，不能把label里面的完整值展示出来。这里的表结构的稍稍有些复杂，他是在数组里面有若干对象，每个 对象有一个数组及若干对象，数组里面又有若干对象。

<el-table :data="tableData" class="my-new-table" border height="390" :span-method="spanMethod"><el-table-column prop="depName" label="单" width="100" /><el-table-column prop="zwmc" label="岗" width="120" /><el-table-column prop="zwjb" label="职" width="80" /><el-table-column prop="name" label="编" width="95" /><!-- <el-table-column prop="name" label="变" width="150" /> --><el-table-column label="变" width="320"><el-table-column prop="province" label="本" width="80"></el-table-column><el-table-column prop="city" label="平" width="80"></el-table-column><el-table-column prop="address" label="女" width="80"></el-table-column><el-table-column prop="zip" label="年" width="80"></el-table-column></el-table-column><el-table-column label="配" :width="elTableColumnWidth > 890 ? elTableColumnWidth : 890"><template slot-scope="scope"><draggable :group="tableA" v-model="scope.row.SimuCadres" @end="saveListsTableData"@start="start1" @add="add1" :class="{ warrperPeople: true, [scope.$index]: true }"><div class="people" v-for="citem in scope.row.SimuCadres" v-if="citem.xm" :key="citem.cid"><div><img src="../../../static/images/rmMn3/gantanhao.png" alt=""><img v-if="citem.zzmm === '中共党员' && citem.zzmm === '预备党员'"src="../../../static/images/rmMn3/fei.png" alt=""><img v-if="citem.xb === '女'" src="../../../static/images/rmMn3/nv.png" alt=""></div><span>{{ citem.xm ? citem.xm : "无名" }}</span></div></draggable></template></el-table-column></el-table><div class="pagination-box-c" style="display:flex;justify-content:space-between;margin-top:16px"><el-pagination background layout="prev, pager, next" :total="currentListDataT.total ? currentListDataT.total : 1" :current-page.sync="currentListDataT.index" :page-size="pageSizePagination":page-sizes="[5, 10]" @prev-click="changeListSizeT" @next-click="changeListSizeT"@current-change="changeListSizeT"></el-pagination></div>

 这里我用draggable包裹起来的东西，就是属于要拖动的范畴。:group="tableA"指的是组，v-model="scope.row.SimuCadres"绑定的数据，@end="saveListsTableData"@start="start1" @add="add1"

 表二和表三的vue如下所示：这里由于工作的关系，不能把label里面的完整值展示出来。这里的表结构简单，数组里面有若干对象。

    <div class="table-container tableTwo"><div class="table-header"><div class="table-cell">姓名</div><div class="table-cell">出生年月</div><div class="table-cell">现</div><div class="table-cell noright">操作</div></div><draggable class="table-row table2" :group="tableB" v-model="tableOut" @end="saveListsTableDataTwo"@start="starTwo" @add="addTwo"><div style="display: flex" v-for="(item, index) in tableOut" :key="Math.random() + index + 'asd'"><span class="table-cell">{{ item.xm }}</span><span class="table-cell">{{ item.csny }}</span><span class="table-cell">{{ item.xrz }}</span><span class="table-cell" style="border-right: none"><el-button class="scope-three-button" size="mini" type="text"@click="opCompare(item.CadreID)">{{compareList.includes(item.CadreID)? "取消对比": "对比"}}</el-button></span></div></draggable></div>

draggable包裹起来的东西，就是属于要拖动的范畴:group="tableB" v-model="tableOut" @end="saveListsTableDataTwo"  @start="starTwo" @add="addTwo"

 

 讲完了vue代码，接下来分享一下为什么要写分页，前端分页的逻辑是什么，与后端写分页有什么区别：

这里阿尭写分页是因为，前端自己拖动的数据，没有点击保存，如果拖动一次调一次后端的接口，非常没有必要，大量的网络请求浪费资源。所以用户在拖数据后再保存完数据，我们拖动的时候，数据一页非常多，看起来不美观，而后端又不知道我们有多少数据，所以这里需要前端写一个分页，逻辑如下：

 

//@end   saveListsTableData(e, e1, e2) {console.log(e);// 获取表格拖拽出去以后的数据！！！this.tableData.forEach(obj => {obj.SimuCadres.forEach(item => {const xm = item.xm;// 在这里可以使用 cname 进行后续操作console.log(xm);});});},
  start1(e) {// 获取表格开始拖拽的数据！！！},

 

  add1(e) {// 拖入了数据对应行const index = e.to._prevClass.split(" ")[0];console.log("表格一", index);const draggedItem = this.tableData[index];const allDraggedItem = this.allTableData[index];// 判断拖拽的对象ID与数组中的ID是否有冲突,此时需要注意的时候，// 拖拽的时候tableData和allTableData内部已经push了这条数据，所以要去找当前的数组里面的对象的id是否有两个完全一样的，// 并且再与e.item._underlying_vm_.CadreID相同，则把这条数据从tableData里面去重// 先检查是否有两个完全相同的 CadreIDconst duplicateCadre = draggedItem.SimuCadres.find((c1, index1) => {return draggedItem.SimuCadres.some((c2, index2) => {return c1.CadreID === c2.CadreID && index1 !== index2;});});if (duplicateCadre &&duplicateCadre.CadreID === e.item._underlying_vm_.CadreID) {// 存在两个完全相同的 CadreID 并且与 e.item._underlying_vm_.CadreID 相同this.$message({showClose: true,message: "该岗位已经存在该干部了",type: "warning"});// 若是存在相同的ID，此时应该获取的e.item,拿到拖拽的数据，再push进来源表的数组中的原位置if (e.from._prevClass == "table-row table3") {let index = parseInt(e.oldIndex);this.inCadreListTotal.splice(index, 0, e.item._underlying_vm_);this.inCadreListTotal = this.inCadreListTotal.filter((c, index, self) => {return !self.slice(index + 1).some(item => item.CadreID === c.CadreID);});this.table3Index = 2;}if (e.from._prevClass == "table-row table2") {let index = parseInt(e.oldIndex);this.saveTableOut.splice(index, 0, e.item._underlying_vm_);this.saveTableOut = this.saveTableOut.filter((c, index, self) => {return !self.slice(index + 1).some(item => item.CadreID === c.CadreID);});this.table2Index = 2;}// 从 tableData 中去重draggedItem.SimuCadres = draggedItem.SimuCadres.filter((c, index, self) => {return !self.slice(index + 1).some(item => item.CadreID === c.CadreID);});// 从 allTableData 中去重allDraggedItem.SimuCadres = draggedItem.SimuCadres.filter((c, index, self) => {return !self.slice(index + 1).some(item => item.CadreID === c.CadreID);});} else {this.table3Index = 1;}},
    // 表格2saveListsTableDataTwo(e) {if (this.table2Index == 2) {this.table2Index = 1;this.currentListDataZ.total = this.saveTableOut.length;if (this.tableOut.length == 0) {this.currentListDataZ.index =this.currentListDataZ.index > 1? this.currentListDataZ.index - 1: this.currentListDataZ.index;}let startIndex = (this.currentListDataZ.index - 1) * 5;let endIndex = this.currentListDataZ.index * 5;this.tableOut = this.saveTableOut.slice(startIndex, endIndex);return;}if (e.from._prevClass == e.to._prevClass) {return;}this.saveTableOut = this.saveTableOut.filter(item => item.CadreID !== e.item._underlying_vm_.CadreID);this.currentListDataZ.total = this.saveTableOut.length;if (this.tableOut.length == 0) {this.currentListDataZ.index =this.currentListDataZ.index > 1? this.currentListDataZ.index - 1: this.currentListDataZ.index;}let startIndex = (this.currentListDataZ.index - 1) * 5;let endIndex = this.currentListDataZ.index * 5;this.tableOut = this.saveTableOut.slice(startIndex, endIndex);},starTwo(e) {// 拖走了谁,只能获取拖走的元素，不能获取拖完后的表格数据，需要在@end里面查看console.log(e);console.log("this.tableOut111", this.tableOut);},addTwo(e) {// 拖入了谁console.log("表格2", e.item._underlying_vm_);this.tableOut = this.tableOut.filter((item, index, self) =>index === self.findIndex(obj => obj.CadreID === item.CadreID));this.saveTableOut.some(item => item.CadreID === e.item._underlying_vm_.CadreID) || this.saveTableOut.push(e.item._underlying_vm_);this.currentListDataZ.total = this.saveTableOut.length;const pageSize = 5; // 每页显示的条数const currentPage = this.currentListDataZ.index; // 当前页码const maxPageIndex = Math.ceil(this.saveTableOut.length / pageSize); // 最大页码console.log(maxPageIndex);if (currentPage < maxPageIndex) {this.currentListDataZ.index = maxPageIndex;}let startIndex = (this.currentListDataZ.index - 1) * 5;let endIndex = this.currentListDataZ.index * 5;this.tableOut = this.saveTableOut.slice(startIndex, endIndex);console.log(" this.saveTableOut", this.saveTableOut);},

 在之前我介绍过表一结构的稍稍有些复杂，他是在数组里面有若干对象，每个 对象有一个数组及若干对象，数组里面又有若干对象。我们要做的是把数据拖入这个数组的对象的数组的对象中，听起来有些绕，看图：

 类型一个表中若干条这个的数据，我们取其中一个单元格来放拖入的数据，首先你要拿到你拖入的数据在哪一行对吧，因为要对拖入的数据做一个去重，拖入重复的没有意义。怎么去获得拖入的行号？在draggable绑定一个动态 :class="{ warrperPeople: true, [scope.$index]: true },这里将表格的index传入，在拖拽事件中，通过e的属性可以看到index ，从而拿到行号。好了拖拽事件就介绍到这里，欢迎各位留言讨论~

 

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

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

相关文章

蓝桥等考Python组别六级008

蓝桥等考Python组别六级008

第一部分：选择题 1、Python L6 （15分） 运行下面的程序，哪个值不可能出现？（ ） import random print(random.randint(0, 3) * 2) 0236正确答案：C 2、Python L6 （15分） 运行下面的程序，输入哪
阅读更多...
数据分析（python）学习笔记1.0

数据分析（python）学习笔记1.0

《利用Python进行数据分析》（原书第2版） 《利用Python进行数据分析》（原书第2版） 《利用Python进行数据分析》（原书第2版） 社区和会议 除了网络搜索，科学、数据相关的Python邮件列表对于解决问题也非常有帮助。可以看看下列邮件列表： pydata：与数据分析和pandas相…
阅读更多...
解决方案：解决https页面加载http资源报错

解决方案：解决https页面加载http资源报错

HTTPS页面加载HTTP资源会报错的原因是出于安全性考虑。 HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是一种通过使用SSL/TLS加密通信来保护数据传输的协议&#xff0c;它确保了客户端和服务器之间的安全连接。 当HTTPS页面尝试加载非加密的HTTP资源时&a…
阅读更多...
Leetcode算法题练习（一）

Leetcode算法题练习（一）

目录 一、前言 二、移动零 三、复写零 四、快乐数 五、电话号码的字母组合 六、字符串相加 一、前言 大家好&#xff0c;我是dbln&#xff0c;从本篇文章开始我就会记录我在练习算法题时的思路和想法。如果有错误&#xff0c;还请大家指出&#xff0c;帮助我进步。谢谢&…
阅读更多...
PHP 二手物品交易网站系统mysql数据库web结构apache计算机软件工程网页wamp

PHP 二手物品交易网站系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 二手物品交易网站系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88385559 二、功能介…
阅读更多...
城市智慧公厕：引领科技创新的新时代

城市智慧公厕：引领科技创新的新时代

城市智慧公厕已经成为当下社会治理模式的升级范式&#xff0c;催生了无限的科技创新。如智慧公厕源头厂家广州中期科技有限公司&#xff0c;所推出的智慧公厕整体解决方案&#xff0c;除基本的厕位监测与引导、环境监测与调节、安全防范与管理、保洁考勤管理、多媒体交互、综合…
阅读更多...
自学WEB后端05-Node.js后端服务链接数据库redis

自学WEB后端05-Node.js后端服务链接数据库redis

嘿&#xff0c;亲爱的小伙伴们&#xff01;&#x1f604; 今天我要给大家分享一个超级方便且高效的 NoSQL 类型数据库——Redis&#xff01;&#x1f4a1; 它可不是一般的关系型数据库哦&#xff0c;而是以键值对形式存储数据的内存数据库。&#x1f4da; 快跟着我一起来学习如…
阅读更多...
python selenium如何带cookie访问网站

python selenium如何带cookie访问网站

python selenium如何带cookie访问网站 要使用Python的Selenium库带有cookie访问网站&#xff0c;你可以按照以下步骤进行操作&#xff1a; 一、流程介绍 安装Selenium库&#xff08;如果尚未安装&#xff09;&#xff1a; pip install selenium导入Selenium库并启动一个浏览…
阅读更多...
性格孤僻怎么办？改变性格孤僻的4种方法

性格孤僻怎么办？改变性格孤僻的4种方法

性格孤僻是比较常见的说法&#xff0c;日常中我们说某人性格孤僻&#xff0c;意思就是这人不太合群&#xff0c;喜欢独来独往&#xff0c;话少&#xff0c;人际关系不太好&#xff0c;其言行往往不符合大众的价值观。从性格孤僻的角度来看&#xff0c;可能跟很多种心理疾病存在…
阅读更多...
k8s搭建EFK日志系统

k8s搭建EFK日志系统

搭建 EFK 日志系统 前面大家介绍了 Kubernetes 集群中的几种日志收集方案&#xff0c;Kubernetes 中比较流行的日志收集解决方案是 Elasticsearch、Fluentd 和 Kibana&#xff08;EFK&#xff09;技术栈&#xff0c;也是官方现在比较推荐的一种方案。 Elasticsearch 是一个实…
阅读更多...
Dart笔记：stream_channel 包用法

Dart笔记：stream_channel 包用法

标题1 标题2 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/133426961 【介绍】stream_channel是一个用…
阅读更多...
腾讯云最新优惠活动汇总！来看看腾讯云最近都有哪些优惠活动！

腾讯云最新优惠活动汇总！来看看腾讯云最近都有哪些优惠活动！

腾讯云作为国内领先的云服务提供商之一&#xff0c;经常推出各种优惠活动来吸引用户&#xff0c;本文将为大家汇总腾讯云最新的优惠活动&#xff0c;希望能够帮助大家降低上云成本&#xff0c;提高用户上云体验。 一、腾讯云新用户优惠券【点击领取】 腾讯云针对新用户推出了…
阅读更多...
后端基础php

后端基础php

虚拟机安装网络方面名词介绍快速自建web环境&#xff08;phpstudy&#xff09;前端基础mysql语法前端【展示】----后端【功能实现】标准php 【ASP / ASPX / PHP / JSP】0基础 --->php入门编程--->代码 对逻辑要求高变量--->会改变的量 php---->$aHello…
阅读更多...
玩转数据-大数据-Flink SQL 中的时间属性

玩转数据-大数据-Flink SQL 中的时间属性

一、说明 时间属性是大数据中的一个重要方面&#xff0c;像窗口&#xff08;在 Table API 和 SQL &#xff09;这种基于时间的操作&#xff0c;需要有时间信息。我们可以通过时间属性来更加灵活高效地处理数据&#xff0c;下面我们通过处理时间和事件时间来探讨一下Flink SQL …
阅读更多...
手动实现BERT

手动实现BERT

本文重点介绍了如何从零训练一个BERT模型的过程&#xff0c;包括整体上BERT模型架构、数据集如何做预处理、MASK替换策略、训练模型和保存、加载模型和测试等。 一.BERT架构   BERT设计初衷是作为一个通用的backbone&#xff0c;然后在下游接入各种任务&#xff0c;包括翻译…
阅读更多...
Minio入门系列【7】Spring Boot集成Minio

Minio入门系列【7】Spring Boot集成Minio

1 前言 之前介绍了如何使用Minio提供的JAVA SDK进行上传和下载文件&#xff0c;在此基础上&#xff0c;我们可以使用spring boot集成Minio JAVA SDK&#xff0c;添加自动配置、装配、客户端管理等功能&#xff0c;简化开发 2 Spring Boot集成Minio 2.1 环境搭建 首先我们搭…
阅读更多...
设计模式-组合模式

设计模式-组合模式

目录 设计模式-组合模式什么是组合模式设计模式&#xff1f;java示例 设计模式-组合模式 什么是组合模式设计模式&#xff1f; 组合模式是一种结构型设计模式&#xff0c;它允许将对象组合成树状结构来表示“部分-整体”的层次结构。组合模式使得用户对单个对象和组合对象的使…
阅读更多...
Docker 网桥、docker0 网桥和 --net host：平台差异、使用方式和场景介绍简介：

Docker 网桥、docker0 网桥和 --net host：平台差异、使用方式和场景介绍简介：

Docker 是一个流行的容器化平台，它提供了不同的网络配置选项。其中，Docker 网桥、docker0 网桥和 --net host 是常见的网络部署方式。本文将介绍这些网络选项的平台差异、使用方式以及适用的场景。 Docker 网桥 (Bridge Networking)：Docker 网桥是 Docker 默认的网络模式。在…
阅读更多...
Android 使用Kotlin封装RecyclerView

Android 使用Kotlin封装RecyclerView

文章目录 1.概述2.运行效果图3.代码实现3.1 扩展RecyclerView 3.2 扩展Adapter3.3 RecyclerView装饰绘制3.3.1 以图片实现分割线3.3.2 画网格线3.3.3空白的分割线3.3.4 不同方向上的分割线 3.4 使用方法 1.概述 在一个开源项目上看到了一个Android Kotlin版的RecyclerView封装…
阅读更多...
JAVA学习（方法的定义和调用）

JAVA学习（方法的定义和调用）

一、方法的定义和调用 1、关键词&#xff1a;static表示静态方法&#xff0c;如没有返回值使用void&#xff0c;方法名前使用类型&#xff0c;例如int、float等&#xff1b; /*** 测试方法的定义和调用*/public class TestMethod {public static void main(String[] args) {a…
阅读更多...
最新文章

Copyright @ 2022~2023