时间戳

首页 > 解决方案 > 使用把手进行迭代时出现 Rowspan 错误

javascript - 使用把手进行迭代时出现 Rowspan 错误

问题描述

我有一个循环，涵盖通过车把请求的动态数据。

         

<tr class = "">
             <td class = "fw-900" colspan = "2"> Salary </ td>
             <td class = "fw-900" colspan = "2"> Duties </ td>
             <td class = "fw-900" colspan = "1"> Name </ td>
         </ tr>

{{#each this.peoples}}
             <tr>
                 <td class = "text-uppercase" colspan = "2"> {{this.salary}} </ td>
                 <td class = "text-uppercase" colspan = "2"> duties </ td>
                 <td class = "text-uppercase"> {{this.name}} </ td>
                 <td class = "text-uppercase text-center total" rowspan = "{{../ members.length}}" colspan = "" width = "15%"> {{../ members.length}} </ td>
             </ tr>
{{/ each}}

当它呈现总数时，我想做一个行跨度，但是由于行跨度交互也覆盖了行跨度线，所以会发生一列呈现给每个呈现的行。

如何正确执行这一策略？

标签： javascriptarrayshandlebars.jsfrontend

解决方案

如果我正确理解您的问题，我自己也遇到了这个问题。我通过获取每个当前迭代的索引来解决这个问题，然后使用帮助器检查索引是否为 0 - 第一次迭代。如果是，则它呈现行跨度的 td。

JS

Handlebars.registerHelper('conditionalHelper', function(lValue, rValue, options) {
  if (lValue == rValue) {
    return options.fn(this);
  }
  return options.inverse(this);
});

模板

{{#each this.peoples as | person personKey|}}
  {{#conditionalHelper personKey 0}}
    <td class = "text-uppercase text-center total" rowspan = "{{../ person.members.length}}" colspan = "" width = "15%"> {{../ person.members.length}} </ td>
  {{/conditionalHelper}}
{{/each}}

有关索引功能的更多信息，请参见此处的文档。

推荐阅读