vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

lazy doc fix & csb example updated

pull/1073/head
Tuğçe Küçükoğlu 2021-03-10 17:15:44 +03:00
parent 3740f71343
commit a0b78568db
1 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/datatable/DataTableLazyDemo.vue
View File

@ -46,26 +46,27 @@
<LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" :components="['Column', 'InputText']" /> <LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" :components="['Column', 'InputText']" />
</div> </div>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt" &lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt; :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']"&gt;
&lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt; &lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter="{filterModel,filterCallback}"&gt;
&lt;InputText type="text" v-model="filters['name']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt; &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"&gt; &lt;Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter="{filterModel,filterCallback}"&gt;
&lt;InputText type="text" v-model="filters['country.name']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by country"/&gt; &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"&gt; &lt;Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter="{filterModel,filterCallback}"&gt;
&lt;InputText type="text" v-model="filters['company']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by company"/&gt; &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by company"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true"&gt; &lt;Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter="{filterModel,filterCallback}"&gt;
&lt;InputText type="text" v-model="filters['representative.name']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/&gt; &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by representative"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
@ -184,26 +185,27 @@ export default {
<div class="layout-content"> <div class="layout-content">
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt" <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" v-model:filters="filters" ref="dt"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"> :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']">
<Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"> <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
<template #filter> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filters['name']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by name"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"/>
</template> </template>
</Column> </Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"> <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
<template #filter> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filters['country.name']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by country"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country"/>
</template> </template>
</Column> </Column>
<Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"> <Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true">
<template #filter> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filters['company']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by company"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by company"/>
</template> </template>
</Column> </Column>
<Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true"> <Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true">
<template #filter> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filters['representative.name']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by representative"/>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -216,6 +218,11 @@ export default {
import CustomerService from '../service/CustomerService'; import CustomerService from '../service/CustomerService';
export default { export default {
watch: {
filters() {
this.onFilter();
}
},
data() { data() {
return { return {
loading: false, loading: false,