Angular中Generic-UI表格单元格设置自定义文本与独立链接

方法1：用列配置的formatter函数快速实现 #

直接在列配置里通过格式化函数返回带自定义文本的链接HTML：

修改列配置代码：

{
  header: '跳转链接',
  field: 'wiki', // 绑定数据中的链接字段
  type: GuiDataType.STRING,
  formatter: (linkUrl: string) => `<a href="${linkUrl}" target="_blank">点击这里</a>`
}

这个函数会把单元格绑定的链接地址，转换成显示“点击这里”的可跳转链接，表格会自动解析渲染这段HTML。

方法2：自定义Angular单元格模板（更灵活） #

如果需要添加样式、自定义事件这类扩展需求，用Angular模板定义单元格：

1. 组件模板里添加表格的自定义单元格模板：

<gui-table [columns]="columns" [source]="food">
  <ng-template guiCellTemplate="customLink" let-item>
    <a [href]="item.wiki" target="_blank" class="table-link">点击这里</a>
  </ng-template>
</gui-table>

2. 在组件.ts文件的列配置里指定使用这个模板：

columns = [
  // 其他列配置...
  {
    header: '跳转链接',
    field: 'wiki',
    type: GuiDataType.STRING,
    view: 'customLink' // 对应模板的名称
  }
];

// 原有数据无需修改
const food = [{
  name: 'Avocado',
  wiki: 'https://en.wikipedia.org/wiki/Avocado',
  image: '//upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Persea_americana_fruit_2.JPG/220px-Persea_americana_fruit_2.JPG'
}];

内容的提问来源于stack exchange，提问作者Sam