使用SortableJS插件实现el-table列表拖拽

使用SortableJS插件实现el-table列表拖拽

下载SortableJS到项目中

npm install sortablejs --save

html(row-key=“id”)必须唯一

    <el-table :data="list" stripe row-key="id" style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="age" label="年龄" align="center" />
      <el-table-column prop="sex" label="性别" align="center" />
    </el-table>

js

import Sortable from "sortablejs";

//默认调用
onMounted(() => {
  rowDrop();
});

//拖拽行
function rowDrop() {
  const tbody = document.querySelector(".el-table__body-wrapper tbody") as HTMLDivElement;
  let tableData = PropList.list;
  Sortable.create(tbody, {
    onEnd({ newIndex, oldIndex }) {
      tableData.splice(newIndex, 0, tableData.splice(oldIndex, 1)[0]);
      let newArray = [];  //拖拽事件完成后的新数组
      newArray = tableData.slice(0);
    },
  });
}


//列也可以拖拽我这边没有写(cv其他地方的和上面代码不一样 上面是ts)
//如果要实现列的拖拽 下面这个方法可以试试!
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)
        }
      })
    }

实现效果

如果要保存拖拽后的数据,则需要后台根据保存时的数据顺序进行保存