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

Templating trial

pull/12/head
cagataycivici 2019-06-28 17:40:32 +03:00
parent 1b598bd2ec
commit 6d4fac6c2a
6 changed files with 142 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/column/Column.vue
View File

@ -24,6 +24,30 @@ export default {
footer: {
type: null,
default: null
},
headerStyle: {
type: null,
default: null
},
headerClass: {
type: String,
default: null
},
bodyStyle: {
type: null,
default: null
},
bodyClass: {
type: String,
default: null
},
footerStyle: {
type: null,
default: null
},
footerClass: {
type: String,
default: null
}
},
render() {

39
src/components/datatable/DataTable.vue
View File

@ -1,19 +1,24 @@
<template>
<div class="p-datatable p-component">
<slot></slot>
{{columns.length}}
<div class="p-datatable-wrapper">
<div class="p-datatable-header" v-if="$scopedSlots.header">
<slot name="header"></slot>
</div>
<table>
<thead class="p-datatable-thead">
<tr>
<th v-for="col of columns" :key="col.columnKey||col.field">
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="col.headerClass">
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
</th>
</tr>
</thead>
<tbody class="p-datatable-tbody">
<tr class="p-datatable-row" v-for="(rowData, index) of value" :key="getRowKey(rowData, index)">
<td v-for="col of columns" :key="col.columnKey||col.field">
{{resolveFieldData(rowData, col.field)}}
<td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
<ColumnSlot :data="rowData" :column="col" type="body" v-if="col.$scopedSlots.body" />
<template v-else>{{resolveFieldData(rowData, col.field)}}</template>
</td>
</tr>
</tbody>
@ -25,6 +30,31 @@
<script>
import ObjectUtils from '../utils/ObjectUtils';
const ColumnSlot = {
functional: true,
props: {
column: {
type: null,
default: null
},
data: {
type: null,
default: null
},
type: {
type: String,
default: null
}
},
render(createElement, context) {
const content = context.props.column.$scopedSlots[context.props.type]({
'data': context.props.data,
'column': context.props.column
});
return [content];
}
};
export default {
props: {
value: {
@ -51,6 +81,9 @@ export default {
resolveFieldData(rowData, field) {
return ObjectUtils.resolveFieldData(rowData, field);
}
},
components: {
'ColumnSlot': ColumnSlot
}
}
</script>

5
src/router.js
View File

@ -110,6 +110,11 @@ export default new Router({
path: '/datatable',
name: 'datatable',
component: () => import('./views/datatable/DataTableDemo.vue')
},
{
path: '/datatable/templating',
name: 'datatabletemplating',
component: () => import('./views/datatable/DataTableTemplatingDemo.vue')
},
{
path: '/dataview',

6
src/views/datatable/DataTableDemo.vue
View File

@ -1,5 +1,7 @@
<template>
<div>
<DataTableSubMenu />
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable</h1>
@ -28,6 +30,7 @@
<script>
import CarService from '../../service/CarService';
import DataTableSubMenu from './DataTableSubMenu';
import DataTableDoc from './DataTableDoc';
export default {
@ -52,7 +55,8 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data);
},
components: {
'DataTableDoc': DataTableDoc
'DataTableDoc': DataTableDoc,
'DataTableSubMenu': DataTableSubMenu
}
}
</script>

13
src/views/datatable/DataTableSubMenu.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div class="content-section content-submenu p-clearfix">
<ul>
<li><router-link to="/datatable">&#9679; Documentation</router-link></li>
<li><router-link to="/datatable/templating">&#9679; Templating</router-link></li>
<li><router-link to="/datatable/paginator">&#9679; Paginator</router-link></li>
<li><router-link to="/datatable/sort">&#9679; Sort</router-link></li>
<li><router-link to="/datatable/filter">&#9679; Filter</router-link></li>
<li><router-link to="/datatable/selection">&#9679; Selection</router-link></li>
<li><router-link to="/datatable/lazy">&#9679; Lazy</router-link></li>
</ul>
</div>
</template>

59
src/views/datatable/DataTableTemplatingDemo.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div>
<DataTableSubMenu />
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable - Templating</h1>
<p>Custom content at header, body and footer sections are supported via templating.</p>
</div>
</div>
<div class="content-section implementation">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand">
<template #body="slotProps">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/>
</template>
</Column>
<Column field="color" header="Color"></Column>
<Column headerStyle="text-align: center; width: 8em">
<template #body="slotProps">
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
</template>
</Column>
</DataTable>
</div>
</div>
</template>
<script>
import CarService from '../../service/CarService';
import DataTableSubMenu from './DataTableSubMenu';
export default {
data() {
return {
columns: null,
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
},
components: {
'DataTableSubMenu': DataTableSubMenu
}
}
</script>
<style lang="scss">
</style>