antd vue的可展开表格使用 vue-draggable-plus 无法正确拖拽解决办法

需求

使用antd vue 的table表格实现拖拽，并且这个表格是一个可展开的，实现表格行拖拽，交换顺序。得到最后的顺序的数据，发送给后端。

实现

直接上代码，注意，这里的我们 需要使用 draggable=“.ant-table-row” 属性，必须使用这个，否则会导致展开行数据错乱的问题

  <VueDraggable
          v-model="tableData"
          item-key="id"
          target=".ant-table-tbody"
          draggable=".ant-table-row"
          tag="tbody"
          @end="onRowSortChange"
          animation="150"
          :scroll="false"
          group="tableRows"
          ref="draggableRef"
        >
          <a-table
            :key="tableKey"
            row-key="id"
            :columns="columns"
            class="draggable-table"
            ref="tableRef"
            style="margin-top: 10px"
            :pagination="false"
            :loading="tableLoading"
            :dataSource="tableData"
            :expandedRowKeys="expandedRowKeys"
            @expandedRowsChange="expandedRowsChange"
          >
         

            <template #expandedRowRender="{ column, record }">
              <div style="height: 400px; overflow: auto">
                <a-table
                  :columns="innerColumns"
                  bordered
                  size="small"
                  :data-source="record.processList"
                  :pagination="false"
                  class="tableChilren"
                  rowKey="id"
                >
          
                </a-table>
              </div>
            </template>
          </a-table>
        </VueDraggable>

js

//数据拖拽排序变化
import { VueDraggable, useDraggable } from 'vue-draggable-plus';

const onRowSortChange = event => {
  tableData.value = cloneDeep(tableData.value.filter(item => item !== undefined));
};

坑

1. 表格不能使用滚动条的设置 否则会导致拖拽混乱或失效的问题
即scroll 属性。这里的scroll 的样式与vue-draggable-plus 的样式冲突。会导致失效。

2. 表格多出空数据的问题
表格拖拽时出现了空白行，是因为多创建了一个undefined的数据，所以我们需要监听@end方法，过滤这些空数据，即可解决。

tableData.value = cloneDeep(tableData.value.filter(item => item !== undefined));