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

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里面去重
      // 先检查是否有两个完全相同的 CadreID
      const 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;
      }
    },

    // 表格2
    saveListsTableDataTwo(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 ，从而拿到行号。好了拖拽事件就介绍到这里，欢迎各位留言讨论~