1

我几乎完成了将几个基于 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 元素，vaadin framework而是关于vaadin 元素

寻找某些东西的调试会话可能会有所帮助，例如TemplateRenderer或类似的东西，但直到现在我什么也没找到：
20171118-调试-渲染器

4

1 回答 1

2

JS API 从 v1 到 v2 发生了重大变化，不再有columns对象。相反，如果要使用 JS 配置列，则需要直接修改<vaadin-grid-column>元素的属性（需要有 DOM 引用）。

特别是对于渲染器，您在列模板中使用常规 HTML，如迁移指南中所述（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

于 2017-11-20T07:22:38.757 回答