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

我爱了你呢

解决方案 Solution 推荐使用VTable组件，比较小巧易用，可以很容易的实现头像和姓名的组合显示。在VTable中可以通过两种方式实现：一种是借助icon，也是最省事的一直，icon的来源直接设置为资源field，具体可以参考我给出的demo。另外一种方式是通过自定义渲染，该方式需要熟悉这种写法，但能实现更复杂的效果，具体可以看他们官方教程。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250104/1adf44491fc53d860e7ae0f85490b227.png) 代码示例 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..." (https://link.segmentfault.com/?enc=5dZRqvxADdP4fxghg97d0g%3D%3D.sxPoOok5URJHa1vTlVkBoGWWfGBC6Rl8%2Fw1ihCdft%2FiiyP7DVyPmy6fBdfVcPcx0C4T0jtK6jMR5S9yMXgmGSheStnzGI2hqMp9%2BR7UaMRs%3D) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250104/1adf44491fc53d860e7ae0f85490b227.png) 相关文档 Related Documentation 自定义icon教程："https://visactor.io/vtable/guide/custom_define/custom_icon" (https://link.segmentfault.com/?enc=oVMdzLdycFKS%2BfYiI%2BE9PA%3D%3D.g3JZooMTvdyibxw5A43c2mVrS6S2PMKGAOs482g2IZQgYx6oXQsYMD%2FeB4sCbZYU5u1jIzehjVweajBZwmVDzg%3D%3D) 相关demo："https://visactor.io/vtable/demo/custom-render/custom-cell-layout" (https://link.segmentfault.com/?enc=nQ9OyUVt0XVnp2R0aG%2BQ5w%3D%3D.87EZfAMJfCOxGYaWgzRTUCOUwEYp%2Fkoz4D02DsVip1CKNWj6BiAOfZOKQReJBmw2oxUpzFhK10M7xVXZZjVZczbxsJ2tWqrV6S5rdwqz9bc%3D) 相关api："https://visactor.io/vtable/option/ListTable-columns-text#icon..." (https://link.segmentfault.com/?enc=h5XxDTe6VcVzziKkTenDOQ%3D%3D.qySBTw%2Bj5C%2F5sIoOASJTsmWyeHCsRgqtf7HYNx0DODC68ZrZV2OecZ1YuYrXUZAe52tbAJdOk8jNyO54daV0nKsAWkKnRdxmJ0Wti8ZGRew%3D) github："https://github.com/VisActor/VTable" (https://link.segmentfault.com/?enc=DQXl%2FCqdS7BfelDGYB14Cg%3D%3D.ong54Rhx7duO%2FnaHpMp4cvZwp6WEkwPht7zSeCSdqVUrNLVUzexGOeF10151txFl)