Polymer 2.0中Vaadin Grid页脚汇总仅显示一次的实现问题

你遇到的问题根源很清晰：因为你在dom-repeat循环生成的每个vaadin-grid-column里都定义了footer模板，每一列都会单独渲染一遍页脚内容，自然就出现了重复显示的情况。要让汇总内容只显示一次，你需要把页脚从列的模板里移出来，放在Vaadin Grid的全局页脚区域。

下面是调整后的完整代码示例，同时帮你实现显示记录总数的功能：

<vaadin-grid id="grid" items="[[ filteredData ]]" multi-sort column-reordering-allowed active-item="{{ selectedItem }}">
  <!-- 动态生成列 -->
  <template is="dom-repeat" items="[[ selectedColumns ]]" as="column">
    <vaadin-grid-column resizable flex-grow="1">
      <template class="header">
        <vaadin-grid-sorter path="name">
          <span>[[ column.name ]]</span>
        </vaadin-grid-sorter>
      </template>
      <template>
        <div>[[ getColumnData( column.path, item ) ]]</div>
      </template>
      <!-- 移除列内部的footer模板，避免重复渲染 -->
    </vaadin-grid-column>
  </template>

  <!-- 全局页脚行，仅渲染一次 -->
  <vaadin-grid-footer-row>
    <vaadin-grid-footer-cell colspan="[[ selectedColumns.length ]]">
      总记录数: [[ filteredData.length ]]
    </vaadin-grid-footer-cell>
  </vaadin-grid-footer-row>
</vaadin-grid>

关键调整说明： #

• 移除了每个vaadin-grid-column内部的footer模板，从根源上避免重复渲染
• 使用Vaadin官方提供的vaadin-grid-footer-row和vaadin-grid-footer-cell组件定义全局页脚，这个区域会自动固定在网格底部，且仅渲染一次
• 通过colspan="[[ selectedColumns.length ]]"让页脚单元格自动跨所有动态生成的列，确保内容在整个网格宽度内居中显示
• 直接绑定filteredData.length来展示当前过滤后的记录总数，替换了原来的静态文本

另外注意你原代码里的小语法错误：<td colspan="12">footer</div>标签不匹配，应该是<td colspan="12">footer</td>，不过调整后的代码用官方页脚组件，就不需要手动写原生表格标签了。

内容的提问来源于stack exchange，提问作者Supriya Kale