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，一经查实，立即删除！

相关文章

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 是一个实…
阅读更多...
腾讯云最新优惠活动汇总！来看看腾讯云最近都有哪些优惠活动！

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

腾讯云作为国内领先的云服务提供商之一&#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;包括翻译…
阅读更多...
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封装…
阅读更多...
分布式事务-TCC异常-空回滚

分布式事务-TCC异常-空回滚

1、空回滚问题&#xff1a; 因为是全局事务&#xff0c;A服务调用服务C的try时服务出现异常服务B因为网络或其他原因还没执行try方法&#xff0c;TCC因为C的try出现异常让所有的服务执行cancel方法&#xff0c;比如B的try是扣减积分 cancel是增加积分&#xff0c;还没扣减就增…
阅读更多...
Java初始化大量数据到Neo4j中(二)

Java初始化大量数据到Neo4j中(二)

接Java初始化大量数据到Neo4j中(一)继续探索&#xff0c;之前用create命令导入大量数据发现太过耗时&#xff0c;查阅资料说大量数据初始化到Neo4j需要使用neo4j-admin import 业务数据说明可以参加Java初始化大量数据到Neo4j中(一)&#xff0c;这里主要是将处理好的节点数据和…
阅读更多...
竞赛无人机搭积木式编程（四）---2023年TI电赛G题空地协同智能消防系统（无人机部分）

竞赛无人机搭积木式编程（四）---2023年TI电赛G题空地协同智能消防系统（无人机部分）

竞赛无人机搭积木式编程&#xff08;四&#xff09; ---2023年TI电赛G题空地协同智能消防系统&#xff08;无人机部分&#xff09; 无名小哥 2023年9月15日 赛题分析与解题思路综述 飞控用户在学习了TI电赛往届真题开源方案以及用户自定义航点自动飞行功能方案讲解后&#x…
阅读更多...
排序篇(二)----选择排序

排序篇(二)----选择排序

排序篇(二)----选择排序 1.直接选择排序 基本思想&#xff1a; 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完 。 直接选择排序: ​ 在元素集合array[i]–array[…
阅读更多...
迭代器，可迭代对象，生成器

迭代器，可迭代对象，生成器

目录 结论&#xff1a; 1&#xff1a;可迭代对象&#xff1a; 2&#xff1a;生成器&#xff1a;概念如下&#xff1a; 3&#xff1a;迭代器的定义&#xff1a;要同时满足以下三点 一&#xff1a;可迭代对象的分类 二&#xff1a;迭代器的意义和应用场景 1&#xff1a;迭代…
阅读更多...
红米手机 导出 通讯录 到电脑保存

红米手机 导出 通讯录 到电脑保存

不要搞什么 云服务 不要安装什么 手机助手 不要安装 什么app 用 usb 线 连接 手机 和 电脑 手机上会跳出 提示 选择 仅传输文件 会出现下面的 一个 盘 进入 MIUI目录 然后进入 此电脑\Redmi Note 5\内部存储设备\MIUI\backup\AllBackup\20230927_043337 如何没有上面的文件&a…
阅读更多...
记一次springboot的@RequestBody json值注入失败的问题（字段大小写的问题）

记一次springboot的@RequestBody json值注入失败的问题（字段大小写的问题）

有时候做后端开发时&#xff0c;难免会与算法联调接口&#xff0c;很多算法的变量命名时全部大写&#xff0c;在实际springmvc开发中会遇到无法赋值的问题。 先粘贴问题代码 entity类 Data NoArgsConstructor EqualsAndHashCode(callSuper true) ToString(callSuper true) …
阅读更多...
应用在手机触摸屏中的电容式触摸芯片

应用在手机触摸屏中的电容式触摸芯片

触控屏&#xff08;Touch panel&#xff09;又称为触控面板&#xff0c;是个可接收触头等输入讯号的感应式液晶显示装置&#xff0c;当接触了屏幕上的图形按钮时&#xff0c;屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置&#xff0c;可用以取代机械式的按钮面板&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023