Vaadin元素vaadin网自定义渲染2+

我几乎移植了几个项目基于vaadin元素 vaadin-grid 从API的1.x到最新版本做了，但我还没有发现例子或文档关于如何将自定义渲染器分配给列。Vaadin元素vaadin网自定义渲染2+

例如，在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或相似的，但我什么也没发现到现在为止：

来源

2017-11-18 Franco Rondini

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

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

针对您的特殊代码示例，它会转换成：

<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-20 07:22:38 Jouni

Vaadin元素vaadin网自定义渲染2+

回答

相关问题