devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：笔触狂放9 | 2024-04-14 10:55:00

赞

踩

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里面就标记可以拖出/入/拷贝

  1.  tableA: {
  2.  
  3.         name: "itxst",
  4.  
  5.         pull: true, //可以拖出
  6.  
  7.         put: true //可以拖入
  8.  
  9.       },

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

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

  1. <el-table :data="tableData" class="my-new-table" border height="390" :span-method="spanMethod">
  2.                     <el-table-column prop="depName" label="单" width="100" />
  3.                     <el-table-column prop="zwmc" label="岗" width="120" />
  4.                     <el-table-column prop="zwjb" label="职" width="80" />
  5.  
  6.                     <el-table-column prop="name" label="编" width="95" />
  7.                     <!-- <el-table-column prop="name" label="变" width="150" /> -->
  8.                     <el-table-column label="变" width="320">
  9.                       <el-table-column prop="province" label="本" width="80">
  10.                       </el-table-column>
  11.                       <el-table-column prop="city" label="平" width="80">
  12.                       </el-table-column>
  13.                       <el-table-column prop="address" label="女" width="80">
  14.                       </el-table-column>
  15.                       <el-table-column prop="zip" label="年" width="80">
  16.                       </el-table-column>
  17.                     </el-table-column>
  18.  
  19.                     <el-table-column label="配" :width="elTableColumnWidth > 890 ? elTableColumnWidth : 890">
  20.                       <template slot-scope="scope">
  21.  
  22.  
  23.                         <draggable :group="tableA" v-model="scope.row.SimuCadres" @end="saveListsTableData"
  24.                           @start="start1" @add="add1" :class="{ warrperPeople: true, [scope.$index]: true }">
  25.                           <div class="people" v-for="citem in scope.row.SimuCadres" v-if="citem.xm" :key="citem.cid">
  26.                             <div>
  27.                               <img src="../../../static/images/rmMn3/gantanhao.png" alt="">
  28.                               <img v-if="citem.zzmm === '中共党员' && citem.zzmm === '预备党员'"
  29.                                 src="../../../static/images/rmMn3/fei.png" alt="">
  30.                               <img v-if="citem.xb === '女'" src="../../../static/images/rmMn3/nv.png" alt="">
  31.  
  32.                             </div>
  33.  
  34.                             <span>{{ citem.xm ? citem.xm : "无名" }}</span>
  35.                           </div>
  36.                         </draggable>
  37.  
  38.  
  39.                       </template>
  40.                     </el-table-column>
  41.  
  42.                   </el-table>
  43.                   <div class="pagination-box-c" style="display:flex;justify-content:space-between;margin-top:16px">
  44.                     <el-pagination background layout="prev, pager, next" :total="currentListDataT.total ? currentListDataT.total : 1
  45.                       " :current-page.sync="currentListDataT.index" :page-size="pageSizePagination"
  46.                       :page-sizes="[5, 10]" @prev-click="changeListSizeT" @next-click="changeListSizeT"
  47.                       @current-change="changeListSizeT"></el-pagination>
  48.                   </div>

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

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

  1.     <div class="table-container tableTwo">
  2.                       <div class="table-header">
  3.                         <div class="table-cell">姓名</div>
  4.                         <div class="table-cell">出生年月</div>
  5.                         <div class="table-cell">现</div>
  6.                         <div class="table-cell noright">操作</div>
  7.                       </div>
  8.                       <draggable class="table-row table2" :group="tableB" v-model="tableOut" @end="saveListsTableDataTwo"
  9.                         @start="starTwo" @add="addTwo">
  10.                         <div style="display: flex" v-for="(item, index) in tableOut" :key="Math.random() + index + 'asd'">
  11.                           <span class="table-cell">{{ item.xm }}</span>
  12.                           <span class="table-cell">{{ item.csny }}</span>
  13.                           <span class="table-cell">{{ item.xrz }}</span>
  14.                           <span class="table-cell" style="border-right: none">
  15.                             <el-button class="scope-three-button" size="mini" type="text"
  16.                               @click="opCompare(item.CadreID)">
  17.                               {{
  18.                                 compareList.includes(item.CadreID)
  19.                                 ? "取消对比"
  20.                                 : "对比"
  21.                               }}
  22.                             </el-button>
  23.                           </span>
  24.                         </div>
  25.                       </draggable>
  26.                     </div>

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

 

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

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

 

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

 

  1.   add1(e) {
  2.       // 拖入了数据对应行
  3.       const index = e.to._prevClass.split(" ")[0];
  4.       console.log("表格一", index);
  5.       const draggedItem = this.tableData[index];
  6.       const allDraggedItem = this.allTableData[index];
  7.       // 判断拖拽的对象ID与数组中的ID是否有冲突,此时需要注意的时候，
  8.       // 拖拽的时候tableData和allTableData内部已经push了这条数据，所以要去找当前的数组里面的对象的id是否有两个完全一样的，
  9.       // 并且再与e.item._underlying_vm_.CadreID相同，则把这条数据从tableData里面去重
  10.       // 先检查是否有两个完全相同的 CadreID
  11.       const duplicateCadre = draggedItem.SimuCadres.find((c1, index1) => {
  12.         return draggedItem.SimuCadres.some((c2, index2) => {
  13.           return c1.CadreID === c2.CadreID && index1 !== index2;
  14.         });
  15.       });
  16.       if (
  17.         duplicateCadre &&
  18.         duplicateCadre.CadreID === e.item._underlying_vm_.CadreID
  19.       ) {
  20.         // 存在两个完全相同的 CadreID 并且与 e.item._underlying_vm_.CadreID 相同
  21.         this.$message({
  22.           showClose: true,
  23.           message: "该岗位已经存在该干部了",
  24.           type: "warning"
  25.         });
  26.          // 若是存在相同的ID，此时应该获取的e.item,拿到拖拽的数据，再push进来源表的数组中的原位置
  27.         if (e.from._prevClass == "table-row table3") {
  28.           let index = parseInt(e.oldIndex);
  29.           this.inCadreListTotal.splice(index, 0, e.item._underlying_vm_);
  30.           this.inCadreListTotal = this.inCadreListTotal.filter(
  31.             (c, index, self) => {
  32.               return !self
  33.                 .slice(index + 1)
  34.                 .some(item => item.CadreID === c.CadreID);
  35.             }
  36.           );
  37.           this.table3Index = 2;
  38.         }
  39.         if (e.from._prevClass == "table-row table2") {
  40.           let index = parseInt(e.oldIndex);
  41.           this.saveTableOut.splice(index, 0, e.item._underlying_vm_);
  42.           this.saveTableOut = this.saveTableOut.filter(
  43.             (c, index, self) => {
  44.               return !self
  45.                 .slice(index + 1)
  46.                 .some(item => item.CadreID === c.CadreID);
  47.             }
  48.           );
  49.           this.table2Index = 2;
  50.         }
  51.  
  52.  
  53.         // 从 tableData 中去重
  54.         draggedItem.SimuCadres = draggedItem.SimuCadres.filter(
  55.           (c, index, self) => {
  56.             return !self
  57.               .slice(index + 1)
  58.               .some(item => item.CadreID === c.CadreID);
  59.           }
  60.         );
  61.         // 从 allTableData 中去重
  62.         allDraggedItem.SimuCadres = draggedItem.SimuCadres.filter(
  63.           (c, index, self) => {
  64.             return !self
  65.               .slice(index + 1)
  66.               .some(item => item.CadreID === c.CadreID);
  67.           }
  68.         );
  69.       } else {
  70.         this.table3Index = 1;
  71.       }
  72.     },
  1.     // 表格2
  2.     saveListsTableDataTwo(e) {
  3.       
  4.       if (this.table2Index == 2) {
  5.         this.table2Index = 1;
  6.         this.currentListDataZ.total = this.saveTableOut.length;
  7.       if (this.tableOut.length == 0) {
  8.         this.currentListDataZ.index =
  9.           this.currentListDataZ.index > 1
  10.             ? this.currentListDataZ.index - 1
  11.             : this.currentListDataZ.index;
  12.       }
  13.       let startIndex = (this.currentListDataZ.index - 1) * 5;
  14.       let endIndex = this.currentListDataZ.index * 5;
  15.       this.tableOut = this.saveTableOut.slice(startIndex, endIndex);
  16.  
  17.         return;
  18.       }
  19.       if (e.from._prevClass == e.to._prevClass) {
  20.         return;
  21.       }
  22.       this.saveTableOut = this.saveTableOut.filter(
  23.         item => item.CadreID !== e.item._underlying_vm_.CadreID
  24.       );
  25.       this.currentListDataZ.total = this.saveTableOut.length;
  26.       if (this.tableOut.length == 0) {
  27.         this.currentListDataZ.index =
  28.           this.currentListDataZ.index > 1
  29.             ? this.currentListDataZ.index - 1
  30.             : this.currentListDataZ.index;
  31.       }
  32.       let startIndex = (this.currentListDataZ.index - 1) * 5;
  33.       let endIndex = this.currentListDataZ.index * 5;
  34.       this.tableOut = this.saveTableOut.slice(startIndex, endIndex);
  35.     },
  36.     starTwo(e) {
  37.       // 拖走了谁,只能获取拖走的元素，不能获取拖完后的表格数据，需要在@end里面查看
  38.       console.log(e);
  39.       console.log("this.tableOut111", this.tableOut);
  40.     },
  41.     addTwo(e) {
  42.       // 拖入了谁
  43.       console.log("表格2", e.item._underlying_vm_);
  44.       this.tableOut = this.tableOut.filter(
  45.         (item, index, self) =>
  46.           index === self.findIndex(obj => obj.CadreID === item.CadreID)
  47.       );
  48.       this.saveTableOut.some(
  49.         item => item.CadreID === e.item._underlying_vm_.CadreID
  50.       ) || this.saveTableOut.push(e.item._underlying_vm_);
  51.  
  52.       this.currentListDataZ.total = this.saveTableOut.length;
  53.       const pageSize = 5; // 每页显示的条数
  54.       const currentPage = this.currentListDataZ.index; // 当前页码
  55.       const maxPageIndex = Math.ceil(this.saveTableOut.length / pageSize); // 最大页码
  56.       console.log(maxPageIndex);
  57.       if (currentPage < maxPageIndex) {
  58.         this.currentListDataZ.index = maxPageIndex;
  59.       }
  60.       let startIndex = (this.currentListDataZ.index - 1) * 5;
  61.       let endIndex = this.currentListDataZ.index * 5;
  62.       this.tableOut = this.saveTableOut.slice(startIndex, endIndex);
  63.  
  64.       console.log(" this.saveTableOut", this.saveTableOut);
  65.     },

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

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

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/421755
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号