vaadin-grid - Vaadin 网格动态数据展示

Question

我正在尝试使用 vaadin 网格元素。需要用动态数据填充它。即列名和计数可以改变。

尝试使用如下所示。使用模板，尝试重复 col 元素和 header 元素。从而动态创建网格。

它给出了错误信息：

未捕获类$S69

（匿名函数）@vaadin-grid.min.js:57

是否可以在 vaadin 网格中加载动态数据（列名和计数可以动态更改）。如果是，那么请指导如何实现它？如果您需要我提供更多信息，请告诉我。

<vaadin-grid id='grid' selection-mode="multi" size="1000">
                  <table>
                    <colgroup>
                        <template is="dom-repeat" items="{{columnNames}}" as="columnName">
                            <col name='{{columnName}}'>
                        </template>
                    </colgroup>
                    <thead>
                      <tr>
                          <template is="dom-repeat" items="{{columnNames}}" as="columnName">
                              <th>{{columnName}}</th>
                          </template>
                      </tr>
                    </thead>
                  </table>
                </vaadin-grid>


_featureTableDataChanged: function(data){
                if(this.isReady){
                    this.convertToJSObj(data);
                    this.$.grid.items = this.jsDataObjArr;
                }
            },
            
            convertToJSObj: function(data){
                this.columnNames = data[0];
                var actualData = data.splice(1, data.length);
                
                for(var rowIndex in actualData){
                    var columnIndex = 0;
                    var rowObj = {};
                    
                    for(var columnName in this.columnNames){
                        rowObj[this.columnNames[columnName]] = actualData[rowIndex][columnIndex];
                        columnIndex++;
                    }
                    
                    this.jsDataObjArr.push(rowObj);
                }
            }