网站设计 工作,西安建设网,招聘网站如何做,成都logo标志设计vue.draggable中文文档 - itxst.com官网在这里#xff0c;感兴趣的小伙伴可以看看。
NPM或yarn安装方式
yarn add vuedraggable npm i -S vuedraggable
UMD浏览器直接引用JS方式
script srchttps://www.itxst.com/package/vue/vue.min.js/script感兴趣的小伙伴可以看看。
NPM或yarn安装方式
yarn add vuedraggable npm i -S vuedraggable
UMD浏览器直接引用JS方式
script srchttps://www.itxst.com/package/vue/vue.min.js/script script srchttps://www.itxst.com/package/sortable/Sortable.min.js/script script srchttps://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 :datatableData classmy-new-table border height390 :span-methodspanMethodel-table-column propdepName label单 width100 /el-table-column propzwmc label岗 width120 /el-table-column propzwjb label职 width80 /el-table-column propname label编 width95 /!-- el-table-column propname label变 width150 / --el-table-column label变 width320el-table-column propprovince label本 width80/el-table-columnel-table-column propcity label平 width80/el-table-columnel-table-column propaddress label女 width80/el-table-columnel-table-column propzip label年 width80/el-table-column/el-table-columnel-table-column label配 :widthelTableColumnWidth 890 ? elTableColumnWidth : 890template slot-scopescopedraggable :grouptableA v-modelscope.row.SimuCadres endsaveListsTableDatastartstart1 addadd1 :class{ warrperPeople: true, [scope.$index]: true }div classpeople v-forcitem in scope.row.SimuCadres v-ifcitem.xm :keycitem.ciddivimg src../../../static/images/rmMn3/gantanhao.png altimg v-ifcitem.zzmm 中共党员 citem.zzmm 预备党员src../../../static/images/rmMn3/fei.png altimg v-ifcitem.xb 女 src../../../static/images/rmMn3/nv.png alt/divspan{{ citem.xm ? citem.xm : 无名 }}/span/div/draggable/template/el-table-column/el-tablediv classpagination-box-c styledisplay:flex;justify-content:space-between;margin-top:16pxel-pagination background layoutprev, pager, next :totalcurrentListDataT.total ? currentListDataT.total : 1 :current-page.synccurrentListDataT.index :page-sizepageSizePagination:page-sizes[5, 10] prev-clickchangeListSizeT next-clickchangeListSizeTcurrent-changechangeListSizeT/el-pagination/div 这里我用draggable包裹起来的东西就是属于要拖动的范畴。:grouptableA指的是组v-modelscope.row.SimuCadres绑定的数据endsaveListsTableDatastartstart1 addadd1 表二和表三的vue如下所示这里由于工作的关系不能把label里面的完整值展示出来。这里的表结构简单数组里面有若干对象。 div classtable-container tableTwodiv classtable-headerdiv classtable-cell姓名/divdiv classtable-cell出生年月/divdiv classtable-cell现/divdiv classtable-cell noright操作/div/divdraggable classtable-row table2 :grouptableB v-modeltableOut endsaveListsTableDataTwostartstarTwo addaddTwodiv styledisplay: flex v-for(item, index) in tableOut :keyMath.random() index asdspan classtable-cell{{ item.xm }}/spanspan classtable-cell{{ item.csny }}/spanspan classtable-cell{{ item.xrz }}/spanspan classtable-cell styleborder-right: noneel-button classscope-three-button sizemini typetextclickopCompare(item.CadreID){{compareList.includes(item.CadreID)? 取消对比: 对比}}/el-button/span/div/draggable/divdraggable包裹起来的东西就是属于要拖动的范畴:grouptableB v-modeltableOut endsaveListsTableDataTwo startstarTwo addaddTwo 讲完了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 从而拿到行号。好了拖拽事件就介绍到这里欢迎各位留言讨论~
