mixin paginator ()
el-row.paginator-row
el-select.per-page(v-model="perPage", @change="refresh", size="small", style="float:right")
el-option(:value="10", label="10/page")
el-option(:value="20", label="20/page")
el-option(:value="50", label="50/page")
el-option(:value="100", label="100/page")
el-pagination(
layout="total, prev, pager, next, jumper",
:current-page.sync="currentPage",
:page-size="perPage",
:total="totalItem",
@current-change="onPageChanged")
.<%=dir%>-page
//- breadcrumb
el-breadcrumb(separator='/')
el-breadcrumb-item Location:
el-breadcrumb-item(:to="{ path: '/<%=dir%>' }") <%=camelizedName%>
//- query bar
query-bar(id="field-query-bar",
ref="querybar",
:query-params="queryParams",
:input-states-disabled="inputStatesDisabled",
:query-params-config="queryParamsConfig",
:buttons="queryBarButtons",
:search-on-enterKey="true",
:on-button-clicked="onQuerybarButtonClicked")
//- paginator
+paginator()
//- data table
el-table(:data="tableData", style="width:100%", stripe="stripe", v-loading="loading")
//- simple row
el-table-column(label="<%=dir%> Id", prop="<%=dir%>Id", width="80")
//- row with template
el-table-column(label="Name")
template(scope)
a.link(:href="`/<%=dir%>/${scope.row.<%=dir%>Id}`", :label="scope.row.name", v-text="scope.row.name")
//- row with for-loop inside
el-table-column(label="Items")
template(scope)
.child.link(v-for="c in scope.row.items")
a(:href="`/item/${c.id}`", v-text="c.name")
+paginator()