如何在数据分析报告或表格中展示用户信息，例如“头像+姓名”的组合？

Question

我想以简单的方式在数据报告表的单个单元格中显示头像和姓名。有没有例子可以参考？

Answer 1

解决方案

我推荐使用VTable组件，因为它轻量级且易于使用，可以轻松实现头像和姓名的组合显示。在 VTable 中，有两种方法可以实现这一点。第一种也是最简单的方法是使用图标。您可以直接将图标源设置为资源字段。更多细节可以参考我提供的demo。第二种方法涉及自定义渲染，这需要熟悉语法。然而，它允许产生更复杂的效果。您可以在他们的官方教程中找到具体说明。

代码示例

const columns: VTable.ColumnsDefine = [
  {
    field: "name",
    title: "name",
    width: "auto",
    cellType: "link",
    templateLink: "https://www.google.com.hk/search?q={name}",
    linkJump: true,
    icon: {
      type: "image",
      src: "image1",
      name: "Avatar",
      shape: "circle",
      //定义文本内容行内图标，第一个字符展示
      width: 30, // Optional
      height: 30,
      positionType: VTable.TYPES.IconPosition.contentLeft,
      marginRight: 20,
      marginLeft: 0,
      cursor: "pointer"
    }
  },
  ...
  ]

结果

在线演示：https://codesandbox.io/s/vtable-photo-username-ypndvm?file=/src/index.ts

相关文档

定义图标教程：https://visactor.io/vtable/guide/custom_define/custom_icon

自定义单元布局演示：https://visactor.io/vtable/demo/custom-render/custom-cell-layout

相关api：https://visactor.io/vtable/option/ListTable-columns-text#icon.ImageIcon.src

github：https://github.com/VisActor/VTable