如何在Vaadin Grid v2单元格文本内添加内嵌超链接？

AI 小北

2026-7-22

在Vaadin Grid v2单元格中嵌入超链接的解决方法

Vaadin Grid v2默认会把单元格内容当作纯文本渲染，直接在数据里插入HTML会被自动转义，所以需要通过自定义单元格模板或渲染器来实现内嵌超链接。

方法一：使用HTML模板列

修改vaadin-grid的代码，为目标列定义模板，通过Polymer的inner-h-t-m-l属性绑定解析HTML内容：

<vaadin-grid id='notesGrid' items={{notes}}>
  <vaadin-grid-column>
    <template class="header">Notes</template>
    <template>
      <div inner-h-t-m-l="[[item]]"></div>
    </template>
  </vaadin-grid-column>
</vaadin-grid>

这里假设notes数组的每个元素都是带HTML链接的字符串，比如："For more information please visit our website at <a href='#'>OurWebsite.com</a>"。inner-h-t-m-l是Polymer专门用于绑定innerHTML的属性，避免和原生属性冲突。

方法二：使用JavaScript单元格渲染器

如果需要更灵活的控制逻辑，可以通过JS定义渲染器，手动设置单元格的innerHTML：

const grid = document.querySelector('#notesGrid');
// 针对第一列设置渲染器
grid.columns[0].renderer = (root, column, rowData) => {
  if (!root.firstElementChild) {
    const contentDiv = document.createElement('div');
    root.appendChild(contentDiv);
  }
  root.firstElementChild.innerHTML = rowData.item;
};