fix enter event for LazyLoad Demo
parent
d1432ab395
commit
34efc5a871
|
@ -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)">
|
: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>
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue