fix enter event for LazyLoad Demo

pull/880/head
Tuğçe Küçükoğlu 2021-01-20 13:24:50 +03:00
parent d1432ab395
commit 34efc5a871
1 changed files with 13 additions and 14 deletions

View File

@ -16,22 +16,22 @@
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"> :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)">
<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>
<InputText type="text" v-model="filters['name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/> <InputText type="text" v-model="filters['name']['value']" @keydown.enter="onFilter($event)" 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>
<InputText type="text" v-model="filters['country.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/> <InputText type="text" v-model="filters['country.name']['value']" @keydown.enter="onFilter($event)" 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>
<InputText type="text" v-model="filters['company']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/> <InputText type="text" v-model="filters['company']['value']" @keydown.enter="onFilter($event)" 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>
<InputText type="text" v-model="filters['representative.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/> <InputText type="text" v-model="filters['representative.name']['value']" @keydown.enter="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -48,22 +48,22 @@
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt; :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&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&gt;
&lt;InputText type="text" v-model="filters['name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt; &lt;InputText type="text" v-model="filters['name']['value']" @keydown.enter="onFilter($event)" 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&gt;
&lt;InputText type="text" v-model="filters['country.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/&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;/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&gt;
&lt;InputText type="text" v-model="filters['company']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/&gt; &lt;InputText type="text" v-model="filters['company']['value']" @keydown.enter="onFilter($event)" 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&gt;
&lt;InputText type="text" v-model="filters['representative.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/&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;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
@ -207,16 +207,15 @@ export default {
this.loadLazyData(); this.loadLazyData();
}, },
onSort(event) { onSort(event) {
console.log(event)
this.lazyParams = event; this.lazyParams = event;
this.loadLazyData(); this.loadLazyData();
}, },
onFilter(event) { onFilter() {
if (event.keyCode === 13) {
this.loading = true; this.loading = true;
this.lazyParams.filters = this.filters; this.lazyParams.filters = this.filters;
this.loadLazyData(); this.loadLazyData();
} }
} }
} }
}
</script> </script>