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

最新推荐文章于 2024-07-16 16:30:15 发布

zlting~

最新推荐文章于 2024-07-16 16:30:15 发布

阅读量1.9k

点赞数 2

分类专栏： VUE 文章标签： Vue AntDesign sortable.js 表格拖拽前端开发

本文链接：https://blog.csdn.net/sunshineTing2/article/details/120151713

版权

VUE 专栏收录该内容

114 篇文章 15 订阅

订阅专栏

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