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

Destructring for slotProps

pull/973/head
Cagatay Civici 2021-02-06 16:52:54 +03:00
parent 31331f99a2
commit 005c818922
2 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/datatable/ColumnFilter.vue
View File

@ -128,24 +128,26 @@ export default {
}, },
mounted() { mounted() {
if (this.filters && this.filters[this.field]) { if (this.filters && this.filters[this.field]) {
if (this.display === 'row') { let fieldFilters = this.filters[this.field];
this.defaultMatchMode = this.filters[this.field].matchMode; if (Array.isArray(fieldFilters)) {
}
else {
this.defaultMatchMode = this.filters[this.field][0].matchMode; this.defaultMatchMode = this.filters[this.field][0].matchMode;
this.defaultOperator = this.filters[this.field][0].operator; this.defaultOperator = this.filters[this.field][0].operator;
} }
else {
this.defaultMatchMode = this.filters[this.field].matchMode;
}
} }
}, },
methods: { methods: {
clearFilter() { clearFilter() {
let _filters = {...this.filters}; let _filters = {...this.filters};
if (this.display === 'row') { if (Array.isArray(_filters[this.field])) {
_filters[this.field].value = null; _filters[this.field].splice(1);
_filters[this.field].matchMode = this.defaultMatchMode; _filters[this.field][0] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator};
} }
else { else {
_filters[this.field] = {value: null, matchMode: this.defaultMatchMode, operator: this.defaultOperator}; _filters[this.field].value = null;
_filters[this.field].matchMode = this.defaultMatchMode;
} }
this.$emit('filtermeta-change', _filters); this.$emit('filtermeta-change', _filters);
@ -405,7 +407,7 @@ export default {
return this.filters[this.field][0].operator; return this.filters[this.field][0].operator;
}, },
fieldConstraints() { fieldConstraints() {
return this.filters[this.field]; return Array.isArray(this.filters[this.field]) ? this.filters[this.field] : [this.filters[this.field]];
}, },
showRemoveIcon() { showRemoveIcon() {
return this.fieldConstraints.length > 1; return this.fieldConstraints.length > 1;

37
src/views/datatable/DataTableFilterDemo.vue
View File

@ -33,8 +33,8 @@
<span class="p-column-title">Name</span> <span class="p-column-title">Name</span>
{{slotProps.data.name}} {{slotProps.data.name}}
</template> </template>
<template #filter="slotProps"> <template #filter="{index}">
<InputText type="text" v-model="filters1['name'][slotProps.index].value" class="p-column-filter" placeholder="Search by name"/> <InputText type="text" v-model="filters1['name'][index].value" class="p-column-filter" placeholder="Search by name"/>
</template> </template>
</Column> </Column>
<Column header="Country" filterField="country.name"> <Column header="Country" filterField="country.name">
@ -43,8 +43,8 @@
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{slotProps.data.country.name}}</span> <span class="image-text">{{slotProps.data.country.name}}</span>
</template> </template>
<template #filter="slotProps"> <template #filter="{index}">
<InputText type="text" v-model="filters1['country.name'][slotProps.index].value" class="p-column-filter" placeholder="Search by country"/> <InputText type="text" v-model="filters1['country.name'][index].value" class="p-column-filter" placeholder="Search by country"/>
</template> </template>
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
@ -70,8 +70,8 @@
<span class="p-column-title">Date</span> <span class="p-column-title">Date</span>
{{slotProps.data.date}} {{slotProps.data.date}}
</template> </template>
<template #filter> <template #filter="{index}">
<Calendar v-model="filters1['date'].value" dateFormat="mm/dd/yy" /> <Calendar v-model="filters1['date'][index].value" dateFormat="mm/dd/yy" />
</template> </template>
</Column> </Column>
<Column header="Balance" filterField="balance" dataType="numeric"> <Column header="Balance" filterField="balance" dataType="numeric">
@ -79,8 +79,8 @@
<span class="p-column-title">Balance</span> <span class="p-column-title">Balance</span>
{{formatCurrency(slotProps.data.balance)}} {{formatCurrency(slotProps.data.balance)}}
</template> </template>
<template #filter> <template #filter="{index}">
<InputNumber v-model="filters1['balance'].value" mode="currency" currency="USD" locale="en-US" /> <InputNumber v-model="filters1['balance'][index].value" mode="currency" currency="USD" locale="en-US" />
</template> </template>
</Column> </Column>
<Column field="status" header="Status"> <Column field="status" header="Status">
@ -88,8 +88,8 @@
<span class="p-column-title">Status</span> <span class="p-column-title">Status</span>
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span> <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template> </template>
<template #filter> <template #filter="{index}">
<Dropdown v-model="filters1['status'].value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true"> <Dropdown v-model="filters1['status'][index].value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
<template #option="slotProps"> <template #option="slotProps">
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span> <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
</template> </template>
@ -102,10 +102,10 @@
<ProgressBar :value="slotProps.data.activity" :showValue="false"></ProgressBar> <ProgressBar :value="slotProps.data.activity" :showValue="false"></ProgressBar>
</template> </template>
<template #filter> <template #filter>
<Slider v-model="filters1['activity'][0].value" range class="p-m-3"></Slider> <Slider v-model="filters1['activity'].value" range class="p-m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="p-d-flex p-ai-center p-jc-between p-px-2">
<span>{{filters1['activity'][0].value[0]}}</span> <span>{{filters1['activity'].value[0]}}</span>
<span>{{filters1['activity'][0].value[1]}}</span> <span>{{filters1['activity'].value[1]}}</span>
</div> </div>
</template> </template>
</Column> </Column>
@ -276,12 +276,12 @@ export default {
'global': {value: null, matchMode: FilterMatchMode.CONTAINS}, 'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
'name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}], 'name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
'country.name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}], 'country.name': [{value: null, matchMode: FilterMatchMode.STARTS_WITH, operator: FilterOperator.AND}],
'representative': [{value: null, matchMode: FilterMatchMode.IN}], 'representative': {value: null, matchMode: FilterMatchMode.IN},
'date': [{value: null, matchMode: FilterMatchMode.IS, operator: FilterOperator.AND}], 'date': [{value: null, matchMode: FilterMatchMode.IS, operator: FilterOperator.AND}],
'balance': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}], 'balance': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
'status': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}], 'status': [{value: null, matchMode: FilterMatchMode.EQUALS, operator: FilterOperator.AND}],
'activity': [{value: [0,100], matchMode: FilterMatchMode.BETWEEN}], 'activity': {value: [0,100], matchMode: FilterMatchMode.BETWEEN},
'verified': [{value: null, matchMode: FilterMatchMode.EQUALS}] 'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
} }
} }
} }
@ -304,11 +304,6 @@ export default {
} }
} }
.table-header {
display: flex;
justify-content: space-between;
}
::v-deep(.p-datepicker) { ::v-deep(.p-datepicker) {
min-width: 25rem; min-width: 25rem;