Skip to content

Commit 68d9dfe

Browse files
huangshuweihuangshuwei
committed
Merge remote-tracking branch 'origin/cell-edit-2'
2 parents 1dc2d77 + 7edc52b commit 68d9dfe

File tree

85 files changed

+5262
-3555
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+5262
-3555
lines changed

‎CHANGE-LOG.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,50 @@ Vx.x.x(TPL)
77
- Style
88
- Dependencies Changes
99

10+
V2.12.0
11+
12+
### Breaking Changes
13+
14+
- 单元格编辑功能非兼容性更新
15+
16+
- 废弃单元格整行编辑功能
17+
- 废弃单击进入编辑状态
18+
- 废弃 `Enter`键切换单元格编辑状态
19+
- 废弃参数 `stopEditingWhenCellLoseFocus`
20+
- 废弃属性 `textSelectedWhenCellFocus`
21+
- 废弃示例方法 `stopAllEditingCell `
22+
- 去除实例方法 `stopEditingCell` 的参数
23+
24+
### Feature
25+
26+
- 单元格选择功能
27+
28+
- 支持 `Enter`键向下移动活动单元格
29+
- 支持 `Shift + Enter`键向上移动活动单元格
30+
- 支持 `Tab`键向右移动活动单元格
31+
- 支持 `Shift + Tab`键向左移动活动单元格
32+
- 支持单元格点击进入可见区域（被固定列遮挡时）
33+
34+
- 单元格编辑功能
35+
36+
- 支持 `F2`键活动单元格进入编辑状态
37+
- 支持 `Ctrl + Enter`键停止编辑状态，并停留在当前单元格
38+
- 支持 `Alt + Enter`键单元格内文本换行
39+
- 支持 `Delete`键清空活动单元格内容
40+
- 支持 `BackSpace`键清空活动单元格内容，并进入编辑状态
41+
- 支持 `Space`键清空活动单元格内容填入空格
42+
- 支持 `Enter`键停止编辑状态并键向下移动活动单元格
43+
- 支持 `Tab`键停止编辑状态并向右移动活动单元格
44+
- 支持 `Shift + Tab`键停止编辑状态并向左移动活动单元格
45+
- 支持在可编辑单元格直接输入文本并进入编辑状态
46+
- 支持长文本输入时，编辑框自动伸缩功能
47+
48+
### Style
49+
50+
- 修改外边框作用的元素，设置 border-radius 更简单
51+
- 新增主题变量 @ve-table-column-fixed-border-color
52+
- 新增主题变量 @ve-table-td-editing-line-height
53+
1054
V2.11.0
1155

1256
### Feature

‎examples/src/comp/app.vue‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ import locale from "./locale";
143143
import I18nMixins from "./mixins/i18n-mixins";
144144
import ThemeSwitchMixins from "./mixins/theme-switch-mixins.js";
145145
import clickoutside from "./directives/clickoutside.js";
146-
import { version } from "../../../package.json";
146+
import { version as latestVersion, docVersions } from "../../../package.json";
147147
148148
export default {
149149
directives: {
@@ -159,18 +159,8 @@ export default {
159159
],
160160
showLangDropdown: false,
161161
//switch version option
162-
switchVersionOptions: [
163-
{
164-
value: "https://happy-coding-clans.github.io/vue-easytable/",
165-
label: version,
166-
},
167-
{
168-
value: " https://happy-coding-clans.github.io/vue-easytable/1.7.2/app.html",
169-
label: "1.x",
170-
},
171-
],
162+
switchVersionOptions: docVersions,
172163
showVersionDropdown: false,
173-
currentDocVersion: version,
174164
};
175165
},
176166
computed: {
@@ -183,6 +173,19 @@ export default {
183173
showLogo() {
184174
return window.env !== "dev";
185175
},
176+
177+
// current doc version
178+
currentDocVersion() {
179+
const { switchVersionOptions } = this;
180+
181+
const { pathname } = window.location;
182+
183+
const versionItem = switchVersionOptions.find(
184+
(x) => x.value === pathname,
185+
);
186+
187+
return versionItem ? versionItem.label : latestVersion;
188+
},
186189
},
187190
watch: {
188191
currentDocLang() {
@@ -210,14 +213,15 @@ export default {
210213
},
211214
// version change
212215
versionChange(item) {
213-
if (this.currentDocVersion !== item.label) {
214-
window.location.href = item.value;
216+
const { protocol, host, pathname, hash } = window.location;
217+
// version 1.0
218+
if (item.isVersion1) {
219+
const newUrl = protocol + "//" + host + item.value;
220+
window.open(newUrl, "_blank");
221+
} else {
222+
const newUrl = protocol + "//" + host + item.value + hash;
223+
window.open(item.value, "_self");
215224
}
216-
this.currentDocVersion = item.label;
217-
218-
setTimeout(() => {
219-
this.showVersionDropdown = false;
220-
}, 150);
221225
},
222226
// go ro router path
223227
gotoRouter(item) {

‎examples/src/demo/index.vue‎

Lines changed: 74 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -88,24 +88,26 @@
8888
</el-row>
8989
</div> -->
9090
</div>
91-
<ve-table
92-
id="demo-loading-container"
93-
ref="tableRef"
94-
fixed-header
95-
border-y
96-
max-height="calc(100vh - 160px)"
97-
:scroll-width="tableScrollWdith"
98-
:sort-option="sortOption"
99-
:virtual-scroll-option="virtualScrollOption"
100-
:columns="columns"
101-
:table-data="tableData"
102-
row-key-field-name="rowKey"
103-
:cell-style-option="cellStyleOption"
104-
:expand-option="expandOption"
105-
:radio-option="radioOption"
106-
:checkbox-option="checkboxOption"
107-
:row-style-option="rowStyleOption"
108-
/>
91+
<div class="table-list">
92+
<ve-table
93+
id="demo-loading-container"
94+
ref="tableRef"
95+
fixed-header
96+
border-y
97+
max-height="calc(100vh - 160px)"
98+
:scroll-width="tableScrollWdith"
99+
:sort-option="sortOption"
100+
:virtual-scroll-option="virtualScrollOption"
101+
:columns="columns"
102+
:table-data="tableData"
103+
row-key-field-name="rowKey"
104+
:cell-style-option="cellStyleOption"
105+
:expand-option="expandOption"
106+
:radio-option="radioOption"
107+
:checkbox-option="checkboxOption"
108+
:row-style-option="rowStyleOption"
109+
/>
110+
</div>
109111
</div>
110112
<!-- <Footer /> -->
111113
</div>
@@ -125,6 +127,14 @@ export default {
125127
mixins: [I18nMixins, ThemeSwitchMixins],
126128
data() {
127129
return {
130+
// edit option 可控单元格编辑
131+
editOption: {
132+
// cell value change
133+
cellValueChange: ({ row, column }) => {
134+
console.log("cellValueChange row::", row);
135+
console.log("cellValueChange column::", column);
136+
},
137+
},
128138
dataRow: 5000,
129139
switchActiveColor: "#1890ff",
130140
switchInactiveColor: "rgba(0,0,0,.25)",
@@ -280,6 +290,7 @@ export default {
280290
width: 100,
281291
align: "center",
282292
sortBy: "",
293+
edit: true,
283294
renderBodyCell: ({ row, column, rowIndex }, h) => {
284295
const cellData = row[column.field];
285296
@@ -319,6 +330,7 @@ export default {
319330
title: "Proficiency",
320331
width: 300,
321332
sortBy: "",
333+
edit: true,
322334
renderBodyCell: (
323335
{ row, column, rowIndex },
324336
h,
@@ -357,6 +369,7 @@ export default {
357369
title: "Skills",
358370
width: 300,
359371
align: "left",
372+
edit: true,
360373
renderBodyCell: (
361374
{ row, column, rowIndex },
362375
h,
@@ -613,6 +626,8 @@ export default {
613626
</script>
614627
<style lang="less">
615628
.site-demo-container {
629+
display: flex;
630+
flex-direction: column;
616631
background: #fff;
617632
margin-top: 62px;
618633
padding: 10px;
@@ -626,52 +641,54 @@ export default {
626641
}
627642
}
628643
629-
// demo sex field
630-
.demo-sex {
631-
&.icon-male {
632-
color: #91d5ff !important;
633-
}
644+
.table-list {
645+
// demo sex field
646+
.demo-sex {
647+
&.icon-male {
648+
color: #91d5ff !important;
649+
}
634650
635-
&.icon-female {
636-
color: #ffadd2 !important;
651+
&.icon-female {
652+
color: #ffadd2 !important;
653+
}
637654
}
638-
}
639655
640-
// proficiency filed custom cell style
641-
.table-body-cell-proficiency {
642-
padding: 0 !important;
643-
}
644-
// proficiency filed
645-
.proficiency-span-container {
646-
height: 100%;
647-
text-align: left;
648-
.proficiency-span {
656+
// proficiency filed custom cell style
657+
.table-body-cell-proficiency {
658+
padding: 0 !important;
659+
}
660+
// proficiency filed
661+
.proficiency-span-container {
649662
height: 100%;
650-
display: inline-flex;
651-
align-items: center;
652-
padding-left: 10px;
653-
font-weight: bold;
654-
color: #555;
655-
656-
&.demo-blue {
657-
background-color: RGBA(24, 144, 255, 0.7);
658-
}
659-
&.demo-orange {
660-
background-color: RGBA(255, 179, 0, 0.7);
661-
}
662-
&.demo-red {
663-
background-color: RGBA(244, 93, 81, 0.7);
663+
text-align: left;
664+
.proficiency-span {
665+
height: 100%;
666+
display: inline-flex;
667+
align-items: center;
668+
padding-left: 10px;
669+
font-weight: bold;
670+
color: #555;
671+
672+
&.demo-blue {
673+
background-color: RGBA(24, 144, 255, 0.7);
674+
}
675+
&.demo-orange {
676+
background-color: RGBA(255, 179, 0, 0.7);
677+
}
678+
&.demo-red {
679+
background-color: RGBA(244, 93, 81, 0.7);
680+
}
664681
}
665682
}
666-
}
667683
668-
// skills
669-
.skill-span {
670-
display: inline-block;
671-
margin-right: 5px;
672-
padding: 3px 8px;
673-
border-radius: 4px;
674-
color: #333;
684+
// skills
685+
.skill-span {
686+
display: inline-block;
687+
margin-right: 5px;
688+
padding: 3px 8px;
689+
border-radius: 4px;
690+
color: #333;
691+
}
675692
}
676693
}
677694
</style>

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

Lines changed: 7 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -487,32 +487,27 @@ export const db = {
487487
param: "{rowKey}",
488488
},
489489
{
490-
name: "setHighlightRow <code>v2.9.0</code>",
490+
name: "setHighlightRow",
491491
desc: `Set highlight row <a href='#/en/doc/table/row-style?anchor=row-click-highlight'>Refer To Demo</a>`,
492492
param: "{rowKey}",
493493
},
494494
{
495-
name: "startEditingCell <code>v2.10.0</code>",
495+
name: "startEditingCell",
496496
desc: `Start cell editing <a href='#/en/doc/table/cell-edit?anchor=ke-kong-bian-ji'>Refer To Demo</a>`,
497497
param: "{rowKey,colKey,defaultValue}",
498498
},
499499
{
500-
name: "stopEditingCell <code>v2.10.0</code>",
501-
desc: `Stop cell editing <a href='#/en/doc/table/cell-edit?anchor=ke-kong-bian-ji'>Refer To Demo</a>`,
502-
param: "{rowKey,colKey}",
500+
name: "stopEditingCell",
501+
desc: `Stop cell editing`,
502+
param: "",
503503
},
504504
{
505-
name: "stopAllEditingCell <code>v2.10.0</code>",
506-
desc: `Stop all cell editing <a href='#/en/doc/table/cell-edit?anchor=ke-kong-bian-ji'>Refer To Demo</a>`,
507-
param: "-",
508-
},
509-
{
510-
name: "hideColumnsByKeys <code>v2.11.0</code>",
505+
name: "hideColumnsByKeys",
511506
desc: `Hide columns <a href='#/en/doc/table/column-hidden?anchor=instance-methods'>Refer To Demo</a>`,
512507
param: "keys",
513508
},
514509
{
515-
name: "showColumnsByKeys <code>v2.11.0</code>",
510+
name: "showColumnsByKeys",
516511
desc: `Show columns <a href='#/en/doc/table/column-hidden?anchor=instance-methods'>Refer To Demo</a>`,
517512
param: "keys",
518513
},
@@ -888,48 +883,13 @@ export const db = {
888883
// 单元格编辑配置
889884
editOption: {
890885
data: [
891-
{
892-
param: "doubleClickEdit",
893-
desc: `Enable double click cell editing`,
894-
type: `<code>Boolean</code>`,
895-
optionalVal: "-",
896-
default: "true",
897-
},
898-
{
899-
param: "fullRowEdit",
900-
desc: `Enable full row editing`,
901-
type: `<code>Boolean</code>`,
902-
optionalVal: "-",
903-
default: "false",
904-
},
905-
{
906-
param: "textSelectedWhenCellFocus",
907-
desc: `Enable cell focus text selection`,
908-
type: `<code>Boolean</code>`,
909-
optionalVal: "-",
910-
default: "true",
911-
},
912-
{
913-
param: "stopEditingWhenCellLoseFocus",
914-
desc: `Enable cell to auto stop editing when cell lose focus`,
915-
type: `<code>Boolean</code>`,
916-
optionalVal: "-",
917-
default: "true",
918-
},
919886
{
920887
param: "cellValueChange",
921888
desc: `Cell stop edit callback method. <code>row</code>Current row data,<code>column</code>Current column `,
922889
type: `<code>Function({ row, column })</code>`,
923890
optionalVal: "-",
924891
default: "-",
925892
},
926-
{
927-
param: "rowValueChange",
928-
desc: `Row stop edit callback method. <code>row</code>Current row data`,
929-
type: `<code>Function({ row })</code>`,
930-
optionalVal: "-",
931-
default: "-",
932-
},
933893
],
934894
columns: columnsType1,
935895
},

0 commit comments

Comments
 (0)