怎么在数据分析报表类的表格中显示用户信息，如：“头像+姓名”组合效果？

Question

我希望用比较简单的方式在数据报表表格的一个单元格中同时绘制头像和姓名。有什么例子可以参考吗？

Answer 1

解决方案 Solution

推荐使用VTable组件，比较小巧易用，可以很容易的实现头像和姓名的组合显示。在VTable中可以通过两种方式实现：一种是借助icon，也是最省事的一直，icon的来源直接设置为资源field，具体可以参考我给出的demo。另外一种方式是通过自定义渲染，该方式需要熟悉这种写法，但能实现更复杂的效果，具体可以看他们官方教程。

代码示例 Code Example

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"
    }
  },
  ...
  ]

结果展示 Results

在线效果参考：https://codesandbox.io/s/vtable-photo-username-ypndvm?file=/s...

相关文档 Related Documentation

自定义icon教程：https://visactor.io/vtable/guide/custom_define/custom_icon

相关demo：https://visactor.io/vtable/demo/custom-render/custom-cell-layout

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

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