ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.02k stars 1.28k forks source link

🐛[BUG] 在ModalForm中使用 Editabletable 时, 如果把 Editabletable 放入 <ProForm.Group> 标签中, 在新增一行表格 record 时, 会让 table scorll 到最坐边 #8235

Open xuoutput opened 1 month ago

xuoutput commented 1 month ago

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

  1. 在 ModalForm中使用 Editabletable, 用于弹窗编辑表格功能,
  2. 表格列很多时, 增加 scorll 来滚动表格
  3. 当列很多, 滚动到最右边处理
  4. 点击表格底部'新增' 一行, 此时发现表格列滚动到最左边

📷 复现步骤

      {/* 这里如果把 table 嵌入 ProForm.Group 会导致新增一行 Table record 时, 滚动条会到滚到最左边  */}
      <ProForm.Group>
        <ComputeTable />
      </ProForm.Group>
      {/* 拿出来就好了 */}
      {/* <ComputeTable /> */}

🏞 期望结果

不滚动

💻 复现代码

https://codesandbox.io/p/sandbox/modal-biao-dan-forked-y4jsdd

import { EditableProTable, ProForm } from "@ant-design/pro-components";
import { nanoid } from "nanoid";

export default function ComputeTable() {
  return (
    <EditableProTable
      bordered
      name="computeTable"
      scroll={{
        x: 1600,
        y: 800,
      }}
      rowKey="id"
      columns={[
        {
          title: "规格0",
          fixed: "left",
          width: 180,
          key: "columns_0",
          valueType: "digit",
        },
        ...[1, 2, 3, 4, 7, 9, 5, 6, 8, 10, 11, 12].map((item) => {
          return {
            title: `规格${item}`,
            width: 180,
            key: `columns_${item}`,
            valueType: "digit",
          };
        }),
      ]}
      recordCreatorProps={{
        newRecordType: "dataSource",
        record: () => ({ id: nanoid() }),
        position: "bottom",
        creatorButtonText: "新增",
      }}
      editable={{
        type: "multiple",
        actionRender: (row, config, defaultDom) => {
          return [defaultDom.delete];
        },
      }}
      pagination={false}
    />
  );
}

© 版本信息

🚑 其他信息

image image