SOURCE

var Main = {
    data () {
        return {
            tableData: [],
            ids: [],
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        handleSelectionChange({ records }) {
            this.ids = this.getIds(records.map(item => item.id));
        },
        getIds(checkboxRecords = []) {
            if (checkboxRecords.length === 0) { return []; }
            const tableIds = this.tableData.map(item => item.id);
            let list = checkboxRecords;
            const newIds = tableIds.filter(id => {
            return list.find(fid => fid == id);
            });
            return newIds;
        },
        init() {
            var list = []
            for(var index = 0; index < 5; index++){
                list.push({
                    id: index + 1,
                    name: 'test' + index,
                })
            }
            this.tableData = list
            this.$nextTick(() => {
                this.rowDrop();
            })
            this.ids = [];
        },
        rowDrop() {
            if (this.sortable1) {
                this.sortable1.destroy();
                this.sortable1 = false;
            }
            const $table = this.$refs.tableRef
            this.sortable1 = Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
                handle: '.drag-btn',
                animation: 300,
                ghostClass: "ghost",
                onEnd: ({newIndex, oldIndex}) => {
                    // TODO: 错误方法
                    // const newId = this.tableData[newIndex].id;
                    // const oldId = this.tableData[oldIndex].id;
                    // const findNewId = this.ids.findIndex(item => item == newId);
                    // const findOldId = this.ids.findIndex(item => item == oldId);
                    // if (findNewId != -1 && findOldId != -1) {
                    //     const currRowId = this.ids.splice(findOldId, 1)[0];
                    //     this.ids.splice(findNewId, 0, currRowId);
                    // }
                    const currRow = this.tableData.splice(oldIndex, 1)[0]
                    this.tableData.splice(newIndex, 0, currRow)
                    // 手动排序后必须重载，否则点击表头的全选按钮 ids 还是初始顺序
                    $table.loadData(this.tableData);
                    
                    // 正确方法
                    const records = $table.getCheckboxRecords();
                    this.ids = this.getIds(records.map(item => item.id));
                }
            })
        }
    },
    destroyed() { // 销毁
        if (this.sortable1) {
            this.sortable1.destroy();
            this.sortable1 = false;
        }
    }
};

Vue.createApp(Main).use(VXETable).mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
    <div class="sortable-row-demo">
      <p>vxe-table 4.x + sortablejs 结合使用演示</p>
      <button type="button" @click="init()">刷新页面</button>
      <vxe-table
        ref="tableRef"
        border
        :scroll-y="{enabled: false}"
        :row-config="{
          useKey: true,
          isHover: true,
        }"
        :checkbox-config="{
          strict: true,
          range: true,
          trigger: 'row',
          highlight: true,
        }"
        @checkbox-change="handleSelectionChange"
        @checkbox-all="handleSelectionChange"
        @checkbox-range-end="handleSelectionChange"
        :data="tableData"
    >
        <vxe-column width="60">
          <template #header>
            <vxe-tooltip content="按住后可以上下拖动排序！" enterable>
              <i class="vxe-icon-question-circle-fill"></i>
            </vxe-tooltip>
          </template>
          <template #default>
            <span class="drag-btn">
              <i class="vxe-icon-edit"></i>
            </span>
          </template>
        </vxe-column>
        <vxe-column type="checkbox" width="55" fixed="left"></vxe-column>
        <vxe-column field="id" title="主键"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
      </vxe-table> 

      <h3>勾选的项顺序</h3>
      {{ids}}
    </div>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css");

 .sortable-row-demo .drag-btn {
    cursor: move;
    font-size: 12px;
}
.sortable-row-demo .vxe-body--row.sortable-ghost,
.sortable-row-demo .vxe-body--row.sortable-chosen {
    background-color: #dfecfb;
}