vue项目中使用el-table表格动态拖拽数据，并根据拖拽滚动条也下拉

项目中实现动态拖拽表格数据

1 使用sortablejs插件

npm install sortablejs --save

2 页面引入

import Sortable from "sortablejs";

3 使用

 绑定row-key为后端的拖拽顺序

//行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      if (tbody) {
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.form.sourceDaTemplateFieldList.splice(
              oldIndex,
              1
            )[0];
            _this.form.sourceDaTemplateFieldList.splice(newIndex, 0, currRow);
          },
        });
      }
    },

在mounted中引入

 动态拖拽就完成了。

但是如果数据过多，表格会出现滚动条这时候拖拽就只能一个个的往下拖拽，所以针对这个问题优化了随着鼠标拖动滚动条也往下拖动。

在表格上监听鼠标点击，抬起和移动事件

然后使用表格的ref的监听

// 按下鼠标记录鼠标位置
    mouseDownHandler(e) {
      this.mouseOffset = e.clientY;
      this.mouseFlag = true;
    },
    mouseUpHandler(e) {
      this.mouseFlag = false;
    },
    mouseMoveHandler(e) {
      // 这里面需要注意，通过ref需要那个那个包含table元素的父元素
      let divData = this.$refs.table.bodyWrapper;
      if (this.mouseFlag) {
        // 设置垂直方向的元素的位置
        divData.scrollTop -= -this.mouseOffset + (this.mouseOffset = e.clientY);
      }
    },

在watch监听列表表格数据变化时重置mouseFlag

watch: {
    "form.sourceDaTemplateFieldList"(val) {
      this.mouseFlag = false;
    },
  },