ant design vue table 指定目标容器 当table 使用 scroll 时，向上拖动时数据会产生 `undefined`

[van-chin]

代码

<template>
  <div class="wh-full">
    <ImsJsonViewer :data="dataSource"></ImsJsonViewer>
    <div>
      <VueDraggable
        v-model="dataSource"
        class="aa-xx"
        :animation="150"
        target=".ant-table-tbody"
      >
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :scroll="{ y: 400 }"
        />
      </VueDraggable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ImsJsonViewer } from "@imsjs/ims-ui-components";
import { VueDraggable } from "vue-draggable-plus";

const dataSource = ref([
  {
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号",
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号222222",
  },
]);

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
];
</script>

运行效果

有什么方法可以在 a-table 上增加 scroll 同时数据正常

环境

vite: 5.0.10 vue: 3.3.13 ant-design-vue: 4.0.8

[van-chin]

最小复现示例 https://codesandbox.io/p/devbox/vue-draggable-plus-antdv-table-with-scroll-6wgvdx

[haiweilian]

antdv table 配置 scroll 有一条隐藏行的问题。可以使用 draggable=".ant-table-row" 配置解决。

<vue-draggable
  v-model="dataSource"
  class="aa-xx"
  :animation="150"
  target=".ant-table-tbody"
  draggable=".ant-table-row"
></vue-draggable>

[van-chin]

@haiweilian

感谢 draggable=".ant-table-row" 增加这个属性，可以解决问题