Skip to content

[Bug] columns更新导致自定义单元格样式失效 #3696

@YMBo

Description

@YMBo

Version

1.17.5

Link to Minimal Reproduction

https://visactor.io/vtable/demo-react/custom-layout/cell-custom-layout-dom

Steps to Reproduce

当重新触发columns更新后,自定义单元格的一些属性会失效。
点击更新前:

Image
点击更新后:

Image

粘贴到编辑器即可

// 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,align } = 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);

  return (
    <Group
      attribute={{
        width,
        height,
        display: 'flex',
        alignItems:align,
        justifyContent: 'center',
        flexDirection: 'column',
        flexWrap: 'nowrap',
      }}
    >
      <Group
        attribute={{
          // boundsPadding: [0, 10],
          // stroke: 'red',
          // lineWidth: 1,
          // display: 'flex',
          // // background: style?.bgColor
          // background: 'pink'
          boundsPadding: [0, 10],
          stroke: '#16a34a',
          lineWidth: 1,
          display: 'flex',
          cornerRadius: 10,
          background: '#ccc'
        }}
      >
        <Text
          attribute={{
            text: dataValue,
            fontSize: 12,
            // fill: style?.textColor,
            fill: 'blue',
            boundsPadding: 3,
            cursor: 'pointer',
            backgroundCornerRadius: 8
          }}
        />
      </Group>
    </Group>
  );
};


function App() {
  const [col,setCol]=useState([{title:'ID',field:'bloggerId'},{title:'Name',field:'bloggerName'}])
  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']
    }
  ];

let columns = []
const handleChange=()=>{
  setCol([{title:'ID',field:'bloggerId'},{title:'Name',field:'bloggerName'}])
}
  return (
    <div>
    <button onClick={handleChange}>更新columns</button>
    <ListTable
      records={records}
       theme={ VTable.themes.ARCO}
      height={900}
      // defaultRowHeight={80}
      onReady={table => {
        // eslint-disable-next-line no-undef
        // (window as any).tableInstance = table;
      }}
      ReactDOM={ReactDom}
    >
    {col.map(item=>{
      return  <ListColumn field={'bloggerName'} title={'Name'} width={220}>
        <UserProfileComponent align="center" role={'custom-layout'} />
      </ListColumn>
    })}
    </ListTable>
    </div>
  );
}

const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(<App />);

// release react instance, do not copy
window.customRelease = () => {
  root.unmount();
};

Current Behavior

触发columns更新后,自定义单元格的一些属性会失效。

Expected Behavior

columns更新不影响自定义单元格样式设置

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

Labels

bpbpbugSomething isn't working

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions