vue antd Sortable双表格拖拽 右表格一条数据没有的时候 从左边表格拖到右表格 增加右表格拖拽高度 使其拖过来的数据放在哪都能显示在右表格怎么做

要实现在右侧表格拖拽时增加高度并确保拖动的数据可以在任何位置正确显示，请按照以下步骤进行操作：

1. 先确保你已经安装了 `Sortable.js` 和 `vuedraggable` 这两个库。

   npm install sortablejs vuedraggable

2. 在 Vue 组件中引入所需的库和样式。

<template>
  <div>
    <a-table :dataSource="leftData" @dragend="onDragEnd">
      <!-- 左侧表格列配置 -->
    </a-table>

    <a-table :dataSource="rightData" ref="rightTable" class="right-table">
      <!-- 右侧表格列配置 -->
    </a-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import draggable from 'vuedraggable';

export default {
  data() {
    return {
      leftData: [...], // 左侧表格数据
      rightData: [...], // 右侧表格数据
    };
  },
  methods: {
    onDragEnd(event) {
      const newIndex = event.newIndex;
      const item = this.leftData.splice(event.oldIndex, 1)[0];
      this.rightData.splice(newIndex, 0, item);

      // 设置右侧表格高度
      const rightTableEl = this.$refs.rightTable.$el;
      rightTableEl.style.height = `${rightTableEl.offsetHeight + 50}px`;
    },
  },
};
</script>

<style>
.right-table {
  overflow-y: auto;
  max-height: 300px; /* 设置右侧表格的最大高度 */
}
</style>

在上述代码中，我们使用 `Sortable.js` 来实现表格拖拽功能，并使用 `vuedraggable` 库将表格的每一行作为可拖拽的元素。当拖拽结束时，我们将被拖拽的数据从左侧表格中移除，并插入到右侧表格的指定位置。然后，我们通过设置右侧表格元素的高度来增加高度，确保拖动的数据可以显示在任何位置。

请注意，我们在右侧表格外部包裹了一个容器，并为容器设置了最大高度和垂直滚动条样式。这样可以限制右侧表格的高度，并确保只有容器内部的内容会出现滚动条。

您可以根据实际需求调整代码中的数据和样式，以适应您的项目。希望这可以帮助到您！如果您有任何其他问题，请随时提问。