el-table & Sortable 行拖拽排序

原创已于 2025-07-19 11:47:56 修改 · 391 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2025-03-11 10:35:25 首次发布

ele-P 使用

1 el-table & Sortable

拖拽排序

依赖

npm i sortablejs --save
npm i @type/sortablejs --save-dev

ref && row-key

<el-table :data="oriTableData" ref="dragTable" row-key="seqNo"> </el-table>

导入依赖 && 初始化示例

import Sortable from 'sortablejs';

const dragTable = ref();  // 获取el-table的ref

// 初始化拖拽
const initDropTable = () => {
  const el = dragTable.value.$el.querySelector('.el-table__body-wrapper tbody') as any;
  Sortable.create(el, {
    animation: 500,
    sort: true,
    //拖拽结束后触发
    onEnd: (evt: any) => {
      setNodeSort(evt.oldIndex, evt.newIndex)
    }
  })
}
const setNodeSort = (oldIndex: any, newIndex: any) => {
  // 使用arr复制一份表格数组数据
  const arr = cloneDeep(oriTableData.value);
  const currentRow = arr.splice(oldIndex, 1)[0];
  arr.splice(newIndex, 0, currentRow );
  // 原数组置空
  oriTableData.value = [];
  nextTick(() => {
    oriTableData.value = arr.map((item, idx) => ({...item, order: idx + 1}));
  });
}