[Table] Popover里的表格内容宽度和头部宽度不同
xmsz-stu opened this issue · comments
Which Component Need Enhancement 期望新增功能的组件
- Table
What does the proposed API look like 期望支持的API
Feature Description 功能描述
![image](https://private-user-images.githubusercontent.com/139225486/350876832-e1f5a39a-2e94-4d9a-b957-36e49d9db879.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2Mzg5MDcsIm5iZiI6MTcyNDYzODYwNywicGF0aCI6Ii8xMzkyMjU0ODYvMzUwODc2ODMyLWUxZjVhMzlhLTJlOTQtNGQ5YS1iOTU3LTM2ZTQ5ZDlkYjg3OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNlQwMjE2NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mZGNiMjlkYjBkYzk1ZGExNzg3MmM2YjY5M2VkODY2ZGVkZTA0NTQ0NTAxZTMxZmI5Mjk0NWE4NDMzYmU0MjQyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.GTU4t2D_TOQt8XLyasOefz4pi2FTAByIgwLDGo0L1V8)
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 补充说明
<Popover motion={false} />
关掉动画吧。
Popover默认是有scale 缩放的transform的。对于 table这种需要依靠 dom实时宽高去计算布局的组件来说,它挂载的同时,scale动画还在进行中,拿到的状态是不对的。
要么关掉动画,要么是等待动画结束你再加载 popover的 content(但对于未定宽高的元素来说这种操作有点死锁),还是更建议针对这种case关掉动画。
<Popover motion={false} />
关掉动画吧。Popover默认是有scale 缩放的transform的。对于 table这种需要依靠 dom实时宽高去计算布局的组件来说,它挂载的同时,scale动画还在进行中,拿到的状态是不对的。
要么关掉动画,要么是等待动画结束你再加载 popover的 content(但对于未定宽高的元素来说这种操作有点死锁),还是更建议针对这种case关掉动画。
那我可以获取动画结束状态然后再触发表格的重渲染吗?
或者支持自定义动画,把缩放改成fadeIn或者slideDown
然后我现在的临时办法是,onRow: {className:"min-w-full"},某个不定长度的column.class='flex-grow'
motion 现在并不支持这样改对吧 @DaiQiangReal ?
animationend 这个 event 是会冒泡的,你可以直接拿到事件,然后重置 table
animationend 这个 event 是会冒泡的,你可以直接拿到事件,然后重置 table
重置table有什么好方法吗