如何实现table数据拖拽

最新推荐文章于 2026-01-06 15:22:41 发布

原创最新推荐文章于 2026-01-06 15:22:41 发布 · 994 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

vue3 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中利用sortablejs插件实现表格数据的拖拽功能，包括插件的下载、局部导入、具体使用步骤，以及在实现过程中需要注意的事项。

1.下载插件 sortablejs

npm install sortablejs

2.局部导入即可

import { defineComponent, ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { ajaxGet, ajaxPost, downLoadByUrl } from "@/utils/axios";
import Sortable from "sortablejs";

3.使用

   function rowDrop() {
      const tbody = document.querySelector(
        ".fuzeinfo-list .el-table__body-wrapper tbody"
      );
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) {
            return;
          }
          var keyArr = mut.tableData.map(o => {
            return o.chargeId;
          });
          const oldKey = keyArr.splice(oldIndex, 1)[0];
          keyArr.splice(newIndex, 0, oldKey);
          const currRow = mut.tableData.splice(oldIndex, 1)[0];

          ajaxPost(store.state.fmsbaseurl + "/wcmdCharge/updateSort", {
            chargeId: keyArr
          })
            .then(response => {
              mut.tableData.splice(newIndex, 0, currRow);
            })
            .catch(response => {
              // 还原
              mut.tableData.splice(oldIndex, 0, currRow);
              console.log(response);
            });
        }
      });
    }
    onMounted(() => {
      rowDrop();
    });

4.注意：

.fuzeinfo-list         //这个是当前也最顶端的class
 
.el-table__body-wrapper tbody      //这个是需要拖拽的class