VTable使用问题：如何实现hover到单元格显示或隐藏部分内容

问题标题

如何实现hover到单元格显示或隐藏部分内容

问题描述

希望鼠标hover到单元格中时，显示或隐藏单元格中的部分元素（图标，文字等）

解决方案

可以使用customLayout来实现这个功能：在容器Group上监听onMouseEnter和onMouseLeave事件，在事件回调中设置相应图元的显示或隐藏。

代码示例

const option = {
  columns: [
    {
      title: 'name',
      field: 'name',
    },
    {
      title: 'custom',
      field: 'custom',
      width: 120,
      customLayout: (args) => {
        const { height, width } = args.rect;
        const container = (
          <VGroup
            attribute={{
              id: 'container',
              width,
              height,
              display: 'flex',
              flexDirection: 'column',
              flexWrap: 'nowrap'
            }}
            onMouseEnter={(event) => {
              // 查找图元
              const hoverShowText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-show';
              }, true);
              // 更新图元
              hoverShowText.setAttribute('opacity', 1);
              // 查找图元
              const hoverHideText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-hide';
              }, true);
              hoverHideText.setAttribute('opacity', 0);
              event.currentTarget.stage.renderNextFrame();
            }}
            onMouseLeave={event => {
              // 查找图元
              const hoverShowText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-show';
              }, true);
              // 更新图元
              hoverShowText.setAttribute('opacity', 0);
              // 查找图元
              const hoverHideText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-hide';
              }, true);
              // 更新图元
              hoverHideText.setAttribute('opacity', 1);
              event.currentTarget.stage.renderNextFrame();
            }}
          >
            <VText
              attribute={{
                id: 'hover-cell-show',
                text: 'hover cell show',
                fill: '#000',
                boundsPadding: [0, 0, 5, 0],
                opacity: 0,
              }}
            ></VText>
            <VText
              attribute={{
                id: 'hover-cell-hide',
                text: 'hover cell hide',
                fill: '#000',
                boundsPadding: [0, 0, 5, 0],
              }}
            ></VText>
          </VGroup>
        );

        return {
            rootContainer: container,
            renderDefault: false
        };
      }
    }
  ],
  records:data,
}

const tableInstance = new VTable.ListTable(container, option);

结果展示

完整示例代码（可以粘贴到 编辑器 上尝试一下）：

const { VGroup, VText } = VTable;
const data = [
  {
    name: '1',
    custom: '1',
  },
  {
    name: '2',
    custom: '2',
  },
  {
    name: '3',
    custom: '3',
  },
  {
    name: '4',
    custom: '4',
  },
  {
    name: '5',
    custom: '5',
  },
]
const option = {
  columns: [
    {
      title: 'name',
      field: 'name',
    },
    {
      title: 'custom',
      field: 'custom',
      width: 120,
      customLayout: (args) => {
        const { height, width } = args.rect;
        const container = (
          <VGroup
            attribute={{
              id: 'container',
              width,
              height,
              display: 'flex',
              flexDirection: 'column',
              flexWrap: 'nowrap'
            }}
            onMouseEnter={(event) => {
              const hoverShowText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-show';
              }, true);
              hoverShowText.setAttribute('opacity', 1);
              const hoverHideText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-hide';
              }, true);
              hoverHideText.setAttribute('opacity', 0);
              event.currentTarget.stage.renderNextFrame();
            }}
            onMouseLeave={event => {
              const hoverShowText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-show';
              }, true);
              hoverShowText.setAttribute('opacity', 0);
              const hoverHideText = event.currentTarget.find(child => {
                return child.attribute.id === 'hover-cell-hide';
              }, true);
              hoverHideText.setAttribute('opacity', 1);
              event.currentTarget.stage.renderNextFrame();
            }}
          >
            <VText
              attribute={{
                id: 'hover-cell-show',
                text: 'hover cell show',
                fill: '#000',
                boundsPadding: [0, 0, 5, 0],
                opacity: 0,
              }}
            ></VText>
            <VText
              attribute={{
                id: 'hover-cell-hide',
                text: 'hover cell hide',
                fill: '#000',
                boundsPadding: [0, 0, 5, 0],
              }}
            ></VText>
          </VGroup>
        );

        return {
            rootContainer: container,
            renderDefault: false
        };
      }
    }
  ],
  records:data,
}

const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);

相关文档

相关api：www.visactor.io/vtable/guid…

github：github.com/VisActor/VT…