🐛[BUG] EditableProTable width 配合 fixed 不生效

lovesly commented 3 years ago

🐛 bug 描述

设置了width，与固定列，但是总长度超出的时候会自适应宽度，无法实现 protable 的固定列效果，导致列数较多时展示异常

📷 复现步骤

copy官网的 editableProTable 示例，columns 中首尾列增加 width，fixed 配置。

🏞 期望结果

首列与尾列固定在两端，不随浏览器缩放改变宽度，中间列可左右滑动。

💻 复现代码

import React, { useState } from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import { EditableProTable, ColumnsState } from '@ant-design/pro-table';
import ProField from '@ant-design/pro-field';
import ProCard from '@ant-design/pro-card';
import { Button } from 'antd';
type DataSourceType = {
  id: React.Key;
  title?: string;
  decs?: string;
  state?: string;
  created_at?: string;
  children?: DataSourceType[];
};
const defaultData: DataSourceType[] = [
  {
    id: 624748504,
    title: '活动名称一',
    decs: '这个活动真好玩',
    state: 'open',
    created_at: '2020-05-26T09:42:56Z',
  },
  {
    id: 624691229,
    title: '活动名称二',
    decs: '这个活动真好玩',
    state: 'closed',
    created_at: '2020-05-26T08:19:22Z',
  },
];
export default () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => defaultData.map((item) => item.id));
  const [dataSource, setDataSource] = useState<DataSourceType[]>(() => defaultData);
  const [columnsStateMap, setColumnsStateMap] = useState<{
    [key: string]: ColumnsState;
  }>({
    title: {
      show: false,
      fixed: 'right',
    },
    option: {
      show: true,
      fixed: 'left',
    },
  });
  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '活动名称',
      dataIndex: 'title',
      fixed: 'right',
      width: 650,
    },
    {
      title: '状态',
      key: 'state',
      width: 750,
      dataIndex: 'state',
      valueType: 'select',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: {
          text: '未解决',
          status: 'Error',
        },
        closed: {
          text: '已解决',
          status: 'Success',
        },
      },
    },
    {
      title: '描述',
      dataIndex: 'decs',
      width: 750,
    },
    {
      title: '操作',
      valueType: 'option',
      fixed: 'left',
      width: 650,
      render: () => {
        return null;
      },
    },
  ];
  return (
    <>
      <EditableProTable
        headerTitle="可编辑表格"
        columns={columns}
        rowKey="id"
        value={dataSource}
        onChange={setDataSource}
        columnsStateMap={columnsStateMap}
        onColumnsStateChange={map => setColumnsStateMap(map)}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          record: () => ({
            id: Date.now(),
          }),
        }}
        toolBarRender={() => {
          return [
            <Button
              type="primary"
              key="save"
              onClick={() => {
                // dataSource 就是当前数据，可以调用 api 将其保存
                console.log(dataSource);
              }}
            >
              保存数据
            </Button>,
          ];
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete];
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList);
          },
          onChange: (...params) => {
            console.log('change params', params);
            setEditableRowKeys(params[0]);
            setDataSource(params[1]);
          },
        }}
      />
      <ProCard title="表格数据" headerBordered collapsible defaultCollapsed>
        <ProField
          fieldProps={{
            style: {
              width: '100%',
            },
          }}
          mode="read"
          valueType="jsonCode"
          text={JSON.stringify(dataSource)}
        />
      </ProCard>
    </>
  );
};

© 版本信息

ProTable 版本: [e.g. 2.30.6]
antd 4.14.0
umi 版本 3.3.5
浏览器环境 chrome 88.0.4324.192（正式版本） (x86_64)
开发环境 [e.g. mac OS]

🚑 其他信息

xiefengnian commented 3 years ago

这个 bug 关联的问题比较大。proTable 用的是 antd 的 table，在 antd 中如果 table 的列为 input，同样的，width 无法发挥作用。

解决办法是可以通过 formItemProp 向 input 注入宽度解决。

{
  title: '描述',
  dataIndex: 'decs',
  /* width: 500, */
  formItemProps: {
    style: { width: 500 },
  },
},

lovesly commented 3 years ago

这个 bug 关联的问题比较大。proTable 用的是 antd 的 table，在 antd 中如果 table 的列为 input，同样的，width 无法发挥作用。

解决办法是可以通过 formItemProp 向 input 注入宽度解决。
{
  title: '描述',
  dataIndex: 'decs',
  /* width: 500, */
  formItemProps: {
    style: { width: 500 },
  },
},
related：ant-design/ant-design#13825 (comment)

怎么直接关掉了，效果不太行，样式完全乱了。当我使用自定义的表单编辑组件的时候，这样的设置也是无效的。你能贴一段使用 EditableProTable 生效的代码吗？

chenshuai2144 commented 3 years ago

自定义编辑的时候，你可以直接控制宽度吧

lovesly commented 3 years ago

自定义编辑的时候，你可以直接控制宽度吧

回头给你个demo，width 是生效的，但是 table 会超长，中间列的滑动也有点问题。

lovesly commented 3 years ago

我大概知道怎么回事了，主要是两个问题：

formItem width 不生效，使用 fromItemProps 传入配置，如果同时传入 rules，和 style，style 就没有被获取到。
editableProTable 的外层，.ant-table-content 这个元素少一个 overflow-x: auto，所以如果1生效了，并且总长度超出容器，右侧就顶出去了。

xXAvoraXx commented 1 year ago

not working when formItemProps width

ant-design / pro-components