Check if child is a column
parent
1805279ed3
commit
012f8185f4
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
name: 'column',
|
||||||
props: {
|
props: {
|
||||||
columnKey: {
|
columnKey: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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[];
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue