VTable使用问题：如何实现文本类型的按钮

问题标题

如何实现文本类型的按钮

问题描述

希望可以在单元格中显示文字类型的按钮，点击后可以进行操作

解决方案

可以使用customLayout功能来自定义按钮图元，并绑定相应的事件

代码示例

  const option: VTable.ListTableConstructorOptions = {
    columns: [
      // ......
      {
        field: 'worksCount',
        title: 'operation',
        width: 110,
        customLayout: (args: VTable.TYPES.CustomRenderFunctionArg) => {
          const { table, row, col, rect } = args;
          const { height, width } = rect ?? table.getCellRect(col, row);

          const container = new VTable.CustomLayout.Group({
            height,
            width,
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'nowrap'
          });

          const editText = new VTable.CustomLayout.Text({
            text: '编辑',
            fontSize: 13,
            fontFamily: 'sans-serif',
            fill: '#2440b3', // #315efb
            boundsPadding: [10, 0, 0, 10],
            underline: 0,
            cursor: 'pointer'
          });
          editText.stateProxy = (stateName: string) => {
            if (stateName === 'hover') {
              return {
                fill: '#315efb',
                underline: 1
              };
            }
          };
          editText.addEventListener('mouseenter', e => {
            editText.addState('hover', true, false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('mouseleave', e => {
            editText.removeState('hover', false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('click', e => {
            console.log('edit click');
          });
          container.add(editText);

          return {
            rootContainer: container,
            renderDefault: false
          };
        }
      }
    ],
    // ......
  };

结果展示

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

  const option = {
    container: document.getElementById(CONTAINER_ID),
    columns: [
      {
        field: 'bloggerId',
        title: 'index'
      },
      {
        field: 'worksCount',
        title: 'operation',
        style: {
          fontFamily: 'Arial',
          fontSize: 12,
          fontWeight: 'bold'
        },
        width: 110,
        customLayout: (args) => {
          const { table, row, col, rect } = args;
          const { height, width } = rect ?? table.getCellRect(col, row);

          const container = new VTable.CustomLayout.Group({
            height,
            width,
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'nowrap'
          });

          const editText = new VTable.CustomLayout.Text({
            text: '编辑',
            fontSize: 13,
            fontFamily: 'sans-serif',
            fill: '#2440b3', // #315efb
            boundsPadding: [10, 0, 0, 10],
            underline: 0,
            cursor: 'pointer'
          });
          editText.stateProxy = (stateName) => {
            if (stateName === 'hover') {
              return {
                fill: '#315efb',
                underline: 1
              };
            }
          };
          editText.addEventListener('mouseenter', e => {
            editText.addState('hover', true, false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('mouseleave', e => {
            editText.removeState('hover', false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('click', e => {
            console.log('edit click');
          });
          container.add(editText);

          const deleteText = new VTable.CustomLayout.Text({
            text: '删除',
            fontSize: 13,
            fontFamily: 'sans-serif',
            fill: '#2440b3', // #315efb
            boundsPadding: [10, 0, 0, 10],
            underline: 0,
            cursor: 'pointer'
          });
          deleteText.stateProxy = (stateName) => {
            if (stateName === 'hover') {
              return {
                fill: '#315efb',
                underline: 1
              };
            }
          };
          deleteText.addEventListener('mouseenter', e => {
            deleteText.addState('hover', true, false);
            table.scenegraph.updateNextFrame();
          });
          deleteText.addEventListener('mouseleave', e => {
            deleteText.removeState('hover', false);
            table.scenegraph.updateNextFrame();
          });
          deleteText.addEventListener('click', e => {
            console.log('delete click');
          });
          container.add(deleteText);

          return {
            rootContainer: container,
            renderDefault: false
          };
        }
      }
    ],
    records: [
      {
        bloggerId: 1,
      },
      {
        bloggerId: 2,
      },
      {
        bloggerId: 3,
      },
      {
        bloggerId: 4,
      },
      {
        bloggerId: 5,
      },
      {
        bloggerId: 6,
      }
    ],
    defaultRowHeight: 40
  };

  const instance = new VTable.ListTable(option);

相关文档

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

github：github.com/VisActor/VT…