Check if child is a column

pull/12/head
cagataycivici 2019-06-29 15:27:35 +03:00
parent 1805279ed3
commit 012f8185f4
5 changed files with 27 additions and 22 deletions

View File

@ -1,5 +1,6 @@
<script> <script>
export default { export default {
name: 'column',
props: { props: {
columnKey: { columnKey: {
type: Object, type: Object,

View File

@ -2,11 +2,11 @@
<div class="p-datatable p-component"> <div class="p-datatable p-component">
<slot></slot> <slot></slot>
<div class="p-datatable-wrapper"> <div class="p-datatable-wrapper">
<div class="p-datatable-header" v-if="$slots.header"> <div class="p-datatable-header" v-if="$scopedSlots.header">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<DTPaginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions" <DTPaginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" @page="onPage($event)"> :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
<template #left v-if="$scopedSlots.paginatorLeft"> <template #left v-if="$scopedSlots.paginatorLeft">
<slot name="paginatorLeft"></slot> <slot name="paginatorLeft"></slot>
</template> </template>
@ -39,7 +39,7 @@
</tbody> </tbody>
</table> </table>
<DTPaginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions" <DTPaginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" @page="onPage($event)"> :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
<template #left v-if="$scopedSlots.paginatorLeft"> <template #left v-if="$scopedSlots.paginatorLeft">
<slot name="paginatorLeft"></slot> <slot name="paginatorLeft"></slot>
</template> </template>
@ -47,7 +47,7 @@
<slot name="paginatorRight"></slot> <slot name="paginatorRight"></slot>
</template> </template>
</DTPaginator> </DTPaginator>
<div class="p-datatable-footer" v-if="$slots.footer"> <div class="p-datatable-footer" v-if="$scopedSlots.footer">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>
@ -162,7 +162,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.columns = [...this.$children]; this.columns = this.$children.filter(child => child.$options._propKeys.indexOf('columnKey') !== -1);
}, },
methods: { methods: {
getRowKey(rowData, index) { getRowKey(rowData, index) {
@ -212,18 +213,10 @@ export default {
return (!this.value || this.value.length === 0); return (!this.value || this.value.length === 0);
}, },
paginatorTop() { paginatorTop() {
if (this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) { return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
return true
}
else
return null;
}, },
paginatorBottom() { paginatorBottom() {
if (this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) { return this.paginator && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both');
return true
}
else
return null;
} }
}, },
components: { components: {

View File

@ -15,6 +15,7 @@ export declare class Paginator extends Vue {
rowsPerPageOptions?: any[]; rowsPerPageOptions?: any[];
template?: string; template?: string;
currentPageReportTemplate?: any; currentPageReportTemplate?: any;
alwaysShow?: boolean;
$emit(eventName: 'page', event: PageState): this; $emit(eventName: 'page', event: PageState): this;
$slots: { $slots: {
left: VNode[]; left: VNode[];

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="p-paginator p-component p-unselectable-text"> <div class="p-paginator p-component p-unselectable-text" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
<div class="p-paginator-left-content" v-if="$scopedSlots.left"> <div class="p-paginator-left-content" v-if="$scopedSlots.left">
<slot name="left" :state="currentState"></slot> <slot name="left" :state="currentState"></slot>
</div> </div>
@ -56,6 +56,10 @@ export default {
currentPageReportTemplate: { currentPageReportTemplate: {
type: null, type: null,
default: '({currentPage} of {totalPages})' default: '({currentPage} of {totalPages})'
},
alwaysShow: {
type: Boolean,
default: true
} }
}, },
data() { data() {

View File

@ -95,12 +95,12 @@ onPage(event) {
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
@ -145,6 +145,12 @@ onPage(event) {
<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>alwaysShow</td>
<td>boolean</td>
<td>true</td>
<td>Whether to show the paginator even there is only one page.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>