VTable icon indicating copy to clipboard operation
VTable copied to clipboard

[Bug] 在使用visactor/react-vtable时候, 在合并单元格内使用 react 的container 属性时不生效

Open zhiaiing opened this issue 10 months ago • 1 comments

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();
};

Image

Current Behavior

在合并单元格内使用 react 的container 属性时不生效

Expected Behavior

在合并单元格内使用 react 的container 属性时不生效

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

zhiaiing avatar Mar 12 '25 05:03 zhiaiing

Image

Image

Image

在 vtable-react-attribute-plugin.ts 里通过 getTargetGroup 这个方法获取 container, 获取 target.name 为 custom-container的元素,在 scenegraph/componet/custom.ts 在合并单元格的情况下, 将name改成 ${CUSTOM_MERGE_PRE_NAME}${preId ?? ''}_${index} , 导致getTargetGroup这个方法找不到对应的container

zhiaiing avatar Mar 12 '25 05:03 zhiaiing