API 2中的Vaadin元素vaadin-grid自定义渲染器+

Question

我几乎完成了基于vaadin元素移植的几个项目  vaadin-grid 从API 1.x到最新版本，但我没有找到有关如何将自定义渲染器分配给列的示例或文档。

例如在main.js中，我无法弄清楚如何在API 2+中移植以下内容：

  grid.columns[2].renderer = function (cell) {
    cell.element.innerHTML = '';
    var progressBar = document.createElement('progress');
    progressBar.setAttribute('value', ((statuses.indexOf(cell.data) + 1) / statuses.length).toString());
    cell.element.appendChild(progressBar);
  };

此处的具体问题是API 2 + columns中的undefined

是否可以将自定义呈现行为赋予vaadin-grid-column？

注意：这个问题不是关于vaadin framework，而关于vaadin elements

调试会话寻找某些东西可能有帮助，例如TemplateRenderer或类似但直到现在我什么都没找到：

Answer 1

JS API从v1显着改为v2，并且不再有columns个对象。相反，如果要使用JS配置列，则需要直接修改<vaadin-grid-column>元素的属性（需要有DOM引用）。

对于渲染器，您可以在列模板中使用常规HTML，如the migration guide中所述（Wiki由于某种原因已关闭，我刚刚重新打开它。）

对于您的特定代码示例，它将转换为：

<vaadin-grid>
  <vaadin-grid-column>
    <template>
     <progress value="[[item.value]]"></progress>
    </template>
  </vaadin-grid-column>
</vaadin-grid>

将item.value替换为数据对象中的正确属性（如果需要在将数据传递到<progress>元素之前以某种方式转换数据，则使用计算属性。

<强>加成：

您是否考虑过使用<vaadin-progress-bar>;）

Valo主题演示：https://cdn.vaadin.com/vaadin-valo-theme/2.0.0-alpha4/demo/progress-bars.html