VTable
VTable copied to clipboard
[Bug] 在使用visactor/react-vtable时候, 在合并单元格内使用 react 的container 属性时不生效
Version
1.70.2
Link to Minimal Reproduction
https://visactor.io/vtable/demo-react/custom-layout/cell-custom-layout-dom?version=1.17.2
Steps to Reproduce
代码如下:
// import * as ReactVTable from '@visactor/react-vtable';
const { useCallback, useRef, useState } = React;
const { ListTable, ListColumn, Group, Text, Image } = ReactVTable;
const { Avatar, Card, Space, Typography } = ArcoDesign;
const { IconThumbUp, IconShareInternal, IconMore } = ArcoDesignIcon;
const { Meta } = Card;
const UserProfileComponent = props => {
const { table, row, col, rect, dataValue } = props;
if (!table || row === undefined || col === undefined) {
return null;
}
const { height, width } = rect || table.getCellRect(col, row);
const record = table.getRecordByCell(col, row);
const [hover, setHover] = useState(false);
const cellRange = table.getCellRange(col, row);
let isMergeCell = false;
if (cellRange.start.col !== cellRange.end.col ||cellRange.start.row !== cellRange.end.row) {
isMergeCell = true;
}
return (
<Group
attribute={{
width,
height,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'center',
alignContent: 'center',
react: {
pointerEvents: true,
container: table.bodyDomContainer,
anchorType: 'top-left',
element: <CardInfo isMergeCell={isMergeCell} record={record} hover={hover} row={row} />
}
}}
>
</Group>
);
};
const CardInfo = props => {
const { isMergeCell } = props;
return <div>{isMergeCell ? '合并单元格' : '----'}</div>
};
function App() {
const records = [
{
bloggerId: 1,
bloggerName: 'Virtual Anchor Xiaohua',
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
introduction:
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
fansCount: 400,
worksCount: 10,
viewCount: 5,
city: 'Dream City',
tags: ['game', 'anime', 'food']
},
{
bloggerId: 2,
bloggerName: 'Virtual anchor little wolf',
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
introduction:
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
fansCount: 800,
worksCount: 20,
viewCount: 15,
city: 'City of Music',
tags: ['music', 'travel', 'photography']
},
{
bloggerId: 3,
bloggerName: 'Virtual anchor bunny',
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
introduction:
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
fansCount: 600,
worksCount: 15,
viewCount: 10,
city: 'City of Art',
tags: ['painting', 'handmade', 'beauty makeup']
},
{
bloggerId: 4,
bloggerName: 'Virtual anchor kitten',
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
introduction:
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
fansCount: 1000,
worksCount: 30,
viewCount: 20,
city: 'Health City',
tags: ['dance', 'fitness', 'cooking']
},
{
bloggerId: 5,
bloggerName: 'Virtual anchor Bear',
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
introduction:
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
fansCount: 1200,
worksCount: 25,
viewCount: 18,
city: 'City of Wisdom',
tags: ['Movie', 'Literature']
},
{
bloggerId: 6,
bloggerName: 'Virtual anchor bird',
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
introduction:
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
fansCount: 900,
worksCount: 12,
viewCount: 8,
city: 'Happy City',
tags: ['music', 'performance', 'variety']
}
];
return (
<ListTable
records={records}
height={900}
// defaultRowHeight={80}
onReady={table => {
// eslint-disable-next-line no-undef
// (window as any).tableInstance = table;
}}
customMergeCell={(col, row, table) => {
if (col === 1 && row === 1 || col === 2 && row === 1) {
return {
text: '合并单元格xxxxxxxxxxxxxxxxxxx',
range: {
start: {col: 1,row: 1,},end: {col: 2,row: 1,}},
style: {bgColor: '#ccc',padding: [0, 0, 0, 0],},
enableCellPadding: false,
}
}
return undefined;
}}
ReactDOM={ReactDom}
>
<ListColumn field={'bloggerId'} title={'ID'} />
<ListColumn field={'bloggerName'} title={'Name'} width={220}>
<UserProfileComponent role={'custom-layout'} />
</ListColumn>
<ListColumn field={'fansCount'} title={'Fan'} />
<ListColumn field={'worksCount'} title={'Work'} />
<ListColumn field={'viewCount'} title={'View'} />
</ListTable>
);
}
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(<App />);
window.customRelease = () => {
root.unmount();
};
Current Behavior
在合并单元格内使用 react 的container 属性时不生效
Expected Behavior
在合并单元格内使用 react 的container 属性时不生效
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
在 vtable-react-attribute-plugin.ts 里通过 getTargetGroup 这个方法获取 container, 获取 target.name 为 custom-container的元素,在 scenegraph/componet/custom.ts 在合并单元格的情况下, 将name改成 ${CUSTOM_MERGE_PRE_NAME}${preId ?? ''}_${index} , 导致getTargetGroup这个方法找不到对应的container