Vue+AntDesignVue+sortable.js实现Antd表格行拖拽功能

1,356 阅读1分钟

实现步骤

1.安装sortable

npm install sortablejs --save

2.引入sortable

import Sortable from 'sortablejs'

3.编写 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);

        }

      });

    }

}

4.在mounted里面执行

mounted() {

    this.rowDrop();

}

参考文档