Fixed #10 - Convert emptyMessage to a template for DataView
parent
1ee86c976e
commit
bf9f7403d7
|
@ -13,7 +13,6 @@ export declare class DataView extends Vue {
|
||||||
pageLinkSize?: number;
|
pageLinkSize?: number;
|
||||||
rowsPerPageOptions?: number[];
|
rowsPerPageOptions?: number[];
|
||||||
currentPageReportTemplate?: string;
|
currentPageReportTemplate?: string;
|
||||||
emptyMessage?: string;
|
|
||||||
sortField?: string;
|
sortField?: string;
|
||||||
sortOrder?: number;
|
sortOrder?: number;
|
||||||
lazy?: boolean;
|
lazy?: boolean;
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
<slot v-if="$scopedSlots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
|
<slot v-if="$scopedSlots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
|
||||||
<slot v-if="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
|
<slot v-if="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
|
||||||
</template>
|
</template>
|
||||||
<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
|
<div v-if="empty" class="p-col-12"><slot name="empty"></slot></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DVPaginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
<DVPaginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||||
|
@ -89,10 +89,6 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: '({currentPage} of {totalPages})'
|
default: '({currentPage} of {totalPages})'
|
||||||
},
|
},
|
||||||
emptyMessage: {
|
|
||||||
type: String,
|
|
||||||
default: 'No records found'
|
|
||||||
},
|
|
||||||
sortField: {
|
sortField: {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: null
|
||||||
|
@ -173,7 +169,7 @@ export default {
|
||||||
else
|
else
|
||||||
return this.value ? this.value.length : 0;
|
return this.value ? this.value.length : 0;
|
||||||
},
|
},
|
||||||
isEmpty() {
|
empty() {
|
||||||
return (!this.value || this.value.length === 0);
|
return (!this.value || this.value.length === 0);
|
||||||
},
|
},
|
||||||
paginatorTop() {
|
paginatorTop() {
|
||||||
|
|
|
@ -74,6 +74,12 @@ export default {
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template #header>Header Content</template>
|
<template #header>Header Content</template>
|
||||||
<template #footer>Footer Content</template>
|
<template #footer>Footer Content</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<h3>Empty Message</h3>
|
||||||
|
<p>Where there is no data to display, the optional <i>empty<i/> template can be used to display information.</p>
|
||||||
|
<CodeHighlight>
|
||||||
|
<template #empty>No records found.</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>DataViewLayoutOptions</h3>
|
<h3>DataViewLayoutOptions</h3>
|
||||||
|
@ -314,12 +320,6 @@ export default {
|
||||||
<td>({currentPage} of {totalPages})</td>
|
<td>({currentPage} of {totalPages})</td>
|
||||||
<td>Template of the current page report element.</td>
|
<td>Template of the current page report element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td>emptyMessage</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>No records found.</td>
|
|
||||||
<td>Text to display when there is no data.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>sortField</td>
|
<td>sortField</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
|
|
Loading…
Reference in New Issue