vxe-table实现行拖拽

1、安装依赖

npm i sortablejs -S

2、数据data

const tableData = ref([
  { c1: '班组1-1', c2: '班次1-1', c3: '班次1-2', c4: '班次1-3', sort: 1 },
  { c1: '班组2-1', c2: '班次2-1', c3: '班次2-2', c4: '班次2-3', sort: 2 },
  { c1: '班组3-1', c2: '班次3-1', c3: '班次3-2', c4: '班次3-3', sort: 3 },
  { c1: '班组4-1', c2: '班次4-1', c3: '班次4-2', c4: '班次4-3', sort: 4 },
]);

3、定义行拖拽方法

const rowDrop = () => {
  // 行拖拽排序
  nextTick(() => {
    new Sortable.create(tableDataRef.value.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
      handle: '.vxe-body--row',
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 拖拽后回调
        const currRow = tableData.value.splice(oldIndex, 1)[0];
        tableData.value.splice(newIndex, 0, currRow);
        tableData.value.forEach((row, index) => {
          row.sort = index + 1;
        });
      },
    });
  });
};

4、在初始时引用

onMounted(() => {
  rowDrop();
  columnDrop();
});