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

Demo update

pull/358/head
cagataycivici 2020-06-30 18:55:07 +03:00
parent 45e5ff6c31
commit 0d881a1ad9
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/datatable/DataTableEditDemo.vue
View File

@ -13,7 +13,7 @@
<div class="card"> <div class="card">
<h5>Basic Cell Editing</h5> <h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p> <p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell"> <DataTable :value="products1" editMode="cell" class="editable-cells-table">
<Column field="code" header="Code"> <Column field="code" header="Code">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.field]" /> <InputText v-model="slotProps.data[slotProps.column.field]" />
@ -47,7 +47,7 @@
<div class="card"> <div class="card">
<h5>Advanced Cell Editing</h5> <h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p> <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete"> <DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"> <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" /> <InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" />
@ -100,7 +100,7 @@
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Basic Cell Editing&lt;/h5&gt; &lt;h5&gt;Basic Cell Editing&lt;/h5&gt;
&lt;p&gt;Simple editors with v-model.&lt;/p&gt; &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
&lt;DataTable :value="products1" editMode="cell"&gt; &lt;DataTable :value="products1" editMode="cell" class="editable-cells-table"&gt;
&lt;Column field="code" header="Code"&gt; &lt;Column field="code" header="Code"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt; &lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
@ -134,7 +134,7 @@
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Advanced Cell Editing&lt;/h5&gt; &lt;h5&gt;Advanced Cell Editing&lt;/h5&gt;
&lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt; &lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt;
&lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete"&gt; &lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt; &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" /&gt; &lt;InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" /&gt;
@ -287,6 +287,13 @@ export default {
</div> </div>
</template> </template>
<CodeHighlight lang="css">
.editable-cells-table td.p-cell-editing {
padding-top: 0;
padding-bottom: 0;
}
</CodeHighlight>
<script> <script>
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
import Vue from 'vue'; import Vue from 'vue';
@ -390,8 +397,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/ .p-datatable th, /deep/ .editable-cells-table td.p-cell-editing {
/deep/ .p-datatable td { padding-top: 0;
height: 5rem; padding-bottom: 0;
} }
</style> </style>