VUE+AntDesign使用sortable.js实现表格拖拽

VUE+AntDesign使用sortable.js实现表格拖拽

第一步：下载sortablejs插件

npm install sortablejs --save

第二步：在页面中引入sortablejs

import Sortable from 'sortablejs'

第三步：编写 rowDrop方法实现行拖拽

methods: {
/** Sortable 行拖拽 */
    rowDrop() {
      const tbody = document.querySelector(".ant-table-tbody"); // 元素选择器名称根据实际内容替换
      const _this = this;
      Sortable.create(tbody, {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        animation: 150,
        ghostClass: "blue-background-class",
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    },
    /** 列拖拽 */
    columnDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
        }
      });
    }
}

第四步：在mounted里面执行

mounted() {
    this.rowDrop();
},