模板 List 分两列展示

使用 freeMarker 的机会有很多，自然也就会接触下 <List> 标签，我想大家应该都不陌生。

<#list attrList as attr>${a.name}</#list> 类似的用法很多，但是偶尔会用到两列的展示效果我们改怎么办呢？

我们可以根据模型中的 int 类型的某一列，一般是自动增长的 id 标识列。

freemarker 模板语言

<#list attrList as attr>
       <#if attr_index%2 ==0>
		<#if attr_index==0>
			<tr>
		<#else>
			</tr><tr>
		</#if>
       </#if>
	<th width="118">${attr.key!}:</th>
	<td>${attr.value!}</td> 
	<#if attr_index==attrList?size-1>
		<#if attr_index%2 ==1>
			</tr>
		<#else>
			<th width="118"></th>
			<td></td></tr>
		</#if>
	</#if>
</#list>

Liquid 模板语言

Liquid 是一门开源的模板语言，由 Shopify 创造并用 Ruby 实现。它是 Shopify 主题的骨骼，并且被用于加载店铺系统的动态内容。

{% raw %}
<table >
{% for post in site.gitpagelink %}
{% assign index_2 = forloop.index | modulo: 2 %}
	{% if index_2 == 1 %}
		{% if forloop.index == 1 %} <tr> {% else %} </tr><tr> {% endif %}
	{% endif %}
	<td>{{ post.name }}</td>
	{% if forloop.size == forloop.index %}
		{% if index_2 == 0 %}</tr>{% else %}<td></td></tr>{% endif %}
	{% endif %}
{% endfor %}
</table>
{% endraw %}

Vue 模板语言

<table class="dropdown-table">
  <template v-for="(userOrg,index) in userOrgs"
              v-if="index%2==0">
	<tr>
        <td class="dropdown-item"
            @click="updateOrg(userOrg.orgid)">
            <div class="dropdown-line">
                <i :class="userOrg.icon"
                   style="font-size:15px; padding: 8px 3px;"></i>{{userOrg.orgname}}
            </div>
            </td>
        <td v-if="index+1<userOrgs.length"
            class="dropdown-item"
            @click="updateOrg(userOrg.orgid)">
            <div class="dropdown-line">
                <i :class="userOrgs[index+1].icon"
                   style="font-size:15px; padding: 8px 3px;"></i>{{userOrgs[index+1].orgname}}
            </div>
            </td>
        <td v-else></td>
    </tr>
  </template>
</table>