[Table] Popover里的表格内容宽度和头部宽度不同

[Chen Shi Jian]

Which Component Need Enhancement 期望新增功能的组件

• Table

What does the proposed API look like 期望支持的API

Feature Description 功能描述

1. 打开时表格内容的宽度并不和头部相等，且不是传入的style.width或scroll.x的值 2. 表格内做任何操作，比如排序，修改内容等，这时候宽度又会是正确的 请问如何解决

import React, { useRef } from 'react';
import { Table, Avatar, Button, Popover } from '@douyinfe/semi-ui';
import * as dateFns from 'date-fns';

const DAY = 24 * 60 * 60 * 1000;

const columns = [
    {
        title: '标题',
        dataIndex: 'name',
       // width: 200,
    },
    {
        title: '大小',
        dataIndex: 'size',
        width: 150,
        align:"right",
        sorter: true
    },
  
];

const getData = () => {
    const data = [];
    for (let i = 0; i < 1000; i++) {
        const isSemiDesign = i % 2 === 0;
        const randomNumber = (i * 1000) % 199;
        data.push({
            key: '' + i,
            name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
            owner: isSemiDesign ? '姜鹏志' : '郝宣',
            size: randomNumber,
            updateTime: new Date().valueOf() + randomNumber * DAY,
            avatarBg: isSemiDesign ? 'grey' : 'red',
        });
    }
    return data;
};

const data = getData();

function VirtualizedFixedDemo() {
    let virtualizedListRef = useRef();
    const scroll = { y: 400, x: 680 };
    const style = { width: 680, margin: '0 auto' };

    return (
        <>


            <Popover
                position='bottomLeft'
                trigger='click'
                content={
                    <Table
                        pagination={false}
                        columns={columns}
                        dataSource={data}
                        scroll={scroll}
                        style={style}
                        virtualized
                        getVirtualizedListRef={ref => (virtualizedListRef = ref)}
                    />
                }
            >
                打开
            </Popover>

        </>
    );
}

render(VirtualizedFixedDemo);

Additional information 补充说明

[pointhalo]

<Popover motion={false} /> 关掉动画吧。

Popover默认是有scale 缩放的transform的。对于 table这种需要依靠 dom实时宽高去计算布局的组件来说，它挂载的同时，scale动画还在进行中，拿到的状态是不对的。

要么关掉动画，要么是等待动画结束你再加载 popover的 content（但对于未定宽高的元素来说这种操作有点死锁），还是更建议针对这种case关掉动画。

[Chen Shi Jian]

<Popover motion={false} /> 关掉动画吧。

Popover默认是有scale 缩放的transform的。对于 table这种需要依靠 dom实时宽高去计算布局的组件来说，它挂载的同时，scale动画还在进行中，拿到的状态是不对的。

要么关掉动画，要么是等待动画结束你再加载 popover的 content（但对于未定宽高的元素来说这种操作有点死锁），还是更建议针对这种case关掉动画。

那我可以获取动画结束状态然后再触发表格的重渲染吗？
或者支持自定义动画，把缩放改成fadeIn或者slideDown
然后我现在的临时办法是，onRow: {className:"min-w-full"}，某个不定长度的column.class='flex-grow'

[pointhalo]

motion 现在并不支持这样改对吧 @DaiQiangReal ?

[代强]

animationend 这个 event 是会冒泡的，你可以直接拿到事件，然后重置 table

[Chen Shi Jian]

animationend 这个 event 是会冒泡的，你可以直接拿到事件，然后重置 table

重置table有什么好方法吗