Transfer组件在Modal组件中会因浏览器缩放而产生宽度无限增长的问题

[muyeluoluo]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

vue3

Reproduction link

https://www.antdv.com/components/transfer-cn

Steps to reproduce

创建一个Modal，将Transfer放入

What is expected?

期望宽度正常

What is actually happening?

宽度无限变长

<template>
  <a-modal title="Modal" :open="true" centered destroyOnClose :maskClosable="false" :width="700">
    <div>
      <a-row :gutter="[12, 12]">
        <a-col :span="24">
          <a-transfer
            :targetKeys="[]"
            :dataSource="dataSource"
            show-search
            :showSelectAll="false"
            :titles="['未选择', '已选择']"
          >
            <template #children="{ filteredItems }">
              <a-table :columns="columns" :data-source="filteredItems" :pagination="false" :scroll="{ y: 300 }" />
            </template>
          </a-transfer>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  const dataSource = ref<RecordArr>([
    {
      id: 11,
      key1: '11111',
      key2: '2222'
    },
    {
      id: 333,
      key1: '333',
      key2: '444'
    }
  ]);
  // 穿梭框左侧
  const columns = reactive<Record<string, any>[]>([
    {
      title: '字段一',
      key: 'key1',
      dataIndex: 'key1'
    },
    {
      title: '字段二',
      key: 'key2',
      dataIndex: 'key2'
    }
  ]);
</script>
<style lang="less" scoped></style>

[webvs2]

将查看问题

[webvs2]

该实例代码不可用，提供一份最小复现代码帮助查看问题 @muyeluoluo

[davidluanmta]

Same issue as you, I used CSS to fix this issue.

[muyeluoluo]

这是一份最小代码，我的电脑缩小到百分之33就会出现无限宽的问题，我朋友是缩到百分之80就会出现这个问题，@webvs2@davidluanmta

<template>
  <a-modal title="Modal" :open="true" centered destroyOnClose :maskClosable="false" :width="700">
    <div>
      <a-row :gutter="[12, 12]">
        <a-col :span="24">
          <a-transfer
            :targetKeys="[]"
            :dataSource="dataSource"
            show-search
            :showSelectAll="false"
            :titles="['未选择', '已选择']"
          >
            <template #children="{ filteredItems }">
              <a-table :columns="columns" :data-source="filteredItems" :pagination="false" :scroll="{ y: 300 }" />
            </template>
          </a-transfer>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  const dataSource = ref<RecordArr>([
    {
      id: 11,
      key1: '11111',
      key2: '2222'
    },
    {
      id: 333,
      key1: '333',
      key2: '444'
    }
  ]);
  // 穿梭框左侧
  const columns = reactive<Record<string, any>[]>([
    {
      title: '字段一',
      key: 'key1',
      dataIndex: 'key1'
    },
    {
      title: '字段二',
      key: 'key2',
      dataIndex: 'key2'
    }
  ]);
</script>
<style lang="less" scoped></style>

[webvs2]

@muyeluoluo 好的

[webvs2]

@muyeluoluo 我查看了实例代码，我想这应该是开发者是组合问题，在modal 和transfer 组合时需要考虑的宽度适配问题，比如在包裹的div 中添加overflow-y: auto;来避免宽度超出

[muyeluoluo]

@webvs2 你说的方式不行。比如我本身浏览器在100%，然后我缩放到33%或110%，这个问题就会浮现。我尝试过给父级设置overflow以及固定宽度都无法解决。你想复现这个问题，就要先设置好组件的参数之后，再进行缩放，才会复现。如果你一开始就是缩放状态，并不会复现。这个问题应该是你们或者table总宽度进行百分比分配列宽时产生的问题。因为是里面的ant-transfer-list部分开始变无限宽。

[webvs2]

@muyeluoluo 抱歉，洛洛。我复现了你的问题，将查看

[webvs2]

@muyeluoluo 已修复， 看起来，不是什么大问题

[muyeluoluo]

@muyeluoluo 已修复， 看起来，不是什么大问题

好的。