Skip to content

Commit 33b52a2

Browse files
huangshuweihuangshuwei
committed
add edit demo
1 parent 5817797 commit 33b52a2

File tree

16 files changed

+1164
-16
lines changed

16 files changed

+1164
-16
lines changed

‎examples/src/docs/en/ve-table/api/db.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,13 @@ export const db = {
243243
optionalVal: "-",
244244
default: "-",
245245
},
246+
{
247+
param: "editOption",
248+
desc: "Cell edit configuration,Refer to editOption for details",
249+
type: "<code>Object</code>",
250+
optionalVal: "-",
251+
default: "-",
252+
},
246253
{
247254
param: "eventCustomOption",
248255
desc: `Custom event configuration,Refer to eventCustomOption configuration for details`,
@@ -305,6 +312,14 @@ export const db = {
305312
default: `"center"`,
306313
rowKey: 30,
307314
},
315+
{
316+
param: "edit",
317+
desc: "Enable cell edit",
318+
type: "<code>Boolean</code>",
319+
optionalVal: `-`,
320+
default: `"false"`,
321+
rowKey: 32,
322+
},
308323
{
309324
param: "sortBy",
310325
desc: `Sort rules.<br>1、<code>sortBy=""</code>：Sorting allowed without collation；<br>2、<code>sortBy="asc"</code>：Default current column ascending；<br>3、<code>sortBy="desc"</code>：Default current column descending；`,
@@ -831,6 +846,55 @@ export const db = {
831846
columns: columnsType1,
832847
},
833848

849+
// 单元格编辑配置
850+
editOption: {
851+
data: [
852+
{
853+
param: "doubleClickEdit",
854+
desc: `Enable double click cell editing`,
855+
type: `<code>Boolean</code>`,
856+
optionalVal: "-",
857+
default: "true",
858+
},
859+
{
860+
param: "fullRowEdit",
861+
desc: `Enable full row editing`,
862+
type: `<code>Boolean</code>`,
863+
optionalVal: "-",
864+
default: "false",
865+
},
866+
{
867+
param: "textSelectedWhenCellFocus",
868+
desc: `Enable cell focus text selection`,
869+
type: `<code>Boolean</code>`,
870+
optionalVal: "-",
871+
default: "true",
872+
},
873+
{
874+
param: "stopEditingWhenCellLoseFocus",
875+
desc: `Enable cell to auto stop editing when cell lose focus`,
876+
type: `<code>Boolean</code>`,
877+
optionalVal: "-",
878+
default: "true",
879+
},
880+
{
881+
param: "cellValueChange",
882+
desc: `Cell stop edit callback method. <code>row</code>Current row data,<code>column</code>Current column `,
883+
type: `<code>Function({ row, column })</code>`,
884+
optionalVal: "-",
885+
default: "-",
886+
},
887+
{
888+
param: "rowValueChange",
889+
desc: `Row stop edit callback method. <code>row</code>Current row data`,
890+
type: `<code>Function({ row })</code>`,
891+
optionalVal: "-",
892+
default: "-",
893+
},
894+
],
895+
columns: columnsType1,
896+
},
897+
834898
// 单元格选择配置
835899
cellSelectionOption: {
836900
data: [

‎examples/src/docs/en/ve-table/api/edit-option-props.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div>
3+
<tpl
4+
:desc="desc"
5+
:anchor="anchor"
6+
:table-data="db.editOption.data"
7+
:columns="db.editOption.columns"
8+
/>
9+
</div>
10+
</template>
11+
<script>
12+
import tpl from "@/comp/api-tpl";
13+
import { db } from "./db";
14+
export default {
15+
components: { tpl },
16+
props: {
17+
anchor: {
18+
type: String,
19+
default: "Cell Edit Configuration",
20+
},
21+
desc: {
22+
type: String,
23+
default: "editOption",
24+
},
25+
},
26+
data() {
27+
return {
28+
db: db,
29+
};
30+
},
31+
};
32+
</script>

‎examples/src/docs/en/ve-table/api/main.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
<SortOption />
2626
<!-- Cell Selection Option -->
2727
<CellSelectionOption />
28+
<!-- edit Option -->
29+
<EditOption />
2830
<!-- Event Custom Option -->
2931
<EventCustomOption />
3032
</div>
@@ -44,6 +46,7 @@ import EventCustomOption from "./event-custom-option-props";
4446
import CellStyleOption from "./cell-style-option-props";
4547
import RowStyleOption from "./row-style-option-props";
4648
import CellSelectionOption from "./cell-selection-option-props";
49+
import EditOption from "./edit-option-props";
4750
export default {
4851
components: {
4952
TableProps,
@@ -59,6 +62,7 @@ export default {
5962
VirtualScrollOption,
6063
SortOption,
6164
CellSelectionOption,
65+
EditOption,
6266
},
6367
data() {
6468
return {

‎examples/src/docs/en/ve-table/cell-edit/base-bak.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
:::anchor
2+
3+
:::demo 1
4+
5+
```html
6+
<template>
7+
<div>
8+
<button @click="startEditingCell(0,'name')">编辑单元格1-1</button>
9+
<button @click="startEditingCell(1,'date')">编辑单元格2-2</button>
10+
&nbsp;&nbsp;
11+
<button @click="startEditingCell(2,'name','222')">编辑单元格3-1</button>
12+
<button @click="startEditingCell(3,'date','')">编辑单元格4-2</button>
13+
&nbsp;&nbsp;
14+
<button @click="stopEditingCell(0,'name')">停止编辑单元格1-1</button>
15+
<button @click="stopEditingCell(1,'date')">停止编辑单元格单元格2-2</button>
16+
<ve-table
17+
ref="tableRef"
18+
rowKeyFieldName="rowKey"
19+
:max-height="300"
20+
:fixed-header="true"
21+
:columns="columns"
22+
:table-data="tableData"
23+
:editOption="editOption"
24+
/>
25+
</div>
26+
</template>
27+
28+
<script>
29+
export default {
30+
data() {
31+
return {
32+
// edit option 可控单元格编辑
33+
editOption: {
34+
// full row edit
35+
fullRowEdit: false,
36+
// double click edit
37+
doubleClickEdit: true,
38+
// text selected when cell focus
39+
textSelectedWhenCellFocus: true,
40+
// auto stop editing when cell lose focus
41+
stopEditingWhenCellLoseFocus: true,
42+
// stop editing when table body click outside
43+
stopEditingWhenTableBodyClickOutside: false,
44+
// cell value change
45+
cellValueChange: ({ row, column }) => {
46+
console.log("cellValueChange row::", row);
47+
console.log("cellValueChange column::", column);
48+
},
49+
// row value change
50+
rowValueChange: ({ row }) => {
51+
console.log("rowValueChange row::", row);
52+
},
53+
},
54+
columns: [
55+
{
56+
field: "name",
57+
key: "name",
58+
title: "Name",
59+
align: "left",
60+
width: "15%",
61+
edit: true,
62+
},
63+
{
64+
field: "date",
65+
key: "date",
66+
title: "Date",
67+
align: "left",
68+
width: "15%",
69+
edit: true,
70+
},
71+
{
72+
field: "hobby",
73+
key: "hobby",
74+
title: "Hobby",
75+
align: "center",
76+
width: "30%",
77+
},
78+
{
79+
field: "address",
80+
key: "address",
81+
title: "Address",
82+
align: "left",
83+
width: "40%",
84+
edit: true,
85+
},
86+
],
87+
// table data
88+
tableData: [
89+
{
90+
name: "John",
91+
date: "1900-05-20",
92+
hobby: "coding and coding repeat",
93+
address: "No.1 Century Avenue, Shanghai",
94+
rowKey: 0,
95+
},
96+
{
97+
name: "Dickerson",
98+
date: "1910-06-20",
99+
hobby: "coding and coding repeat",
100+
address: "No.1 Century Avenue, Beijing",
101+
rowKey: 1,
102+
},
103+
{
104+
name: "Larsen",
105+
date: "2000-07-20",
106+
hobby: "coding and coding repeat",
107+
address: "No.1 Century Avenue, Chongqing",
108+
rowKey: 2,
109+
},
110+
{
111+
name: "Geneva",
112+
date: "2010-08-20",
113+
hobby: "coding and coding repeat",
114+
address: "No.1 Century Avenue, Xiamen",
115+
rowKey: 3,
116+
},
117+
{
118+
name: "Jami",
119+
date: "2020-09-20",
120+
hobby: "coding and coding repeat",
121+
address: "No.1 Century Avenue, Shenzhen",
122+
rowKey: 4,
123+
},
124+
],
125+
};
126+
},
127+
methods: {
128+
// start editing cell
129+
startEditingCell(rowKey, colKey, defaultValue) {
130+
this.$refs["tableRef"].startEditingCell({ rowKey, colKey, defaultValue });
131+
},
132+
133+
stopEditingCell(rowKey, colKey) {
134+
this.$refs["tableRef"].stopEditingCell({ rowKey, colKey });
135+
},
136+
},
137+
};
138+
</script>
139+
```
140+
141+
:::

0 commit comments

Comments
 (0)