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;},},