Skip to content

Commit 896cd4e

Browse files
cq-pandacq-panda
committed
增加table编辑时点击其他行结束编辑状态(默认鼠标离开结束编辑，)
1 parent 319cb82 commit 896cd4e

File tree

4 files changed

+109
-22
lines changed

4 files changed

+109
-22
lines changed

‎Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@
183183
:endEditBefore="detailOptions.endEditBefore"
184184
:endEditAfter="detailOptions.endEditAfter"
185185
:summary="detailOptions.summary"
186+
:click-edit="detailOptions.clickEdit"
186187
></vol-table>
187188
</div>
188189
<!--明细footer自定义组件-->
@@ -348,6 +349,7 @@ var vueParam = {
348349
pagination: { total: 0, size: 100, sortName: "" }, //从表分页配置数据
349350
height: 0, //默认从表高度
350351
doubleEdit: true, //使用双击编辑
352+
clickEdit:false,//是否开启点击单元格编辑，点击其他行时结束编辑
351353
currentReadonly: false, //当前用户没有编辑或新建权限时，表单只读(可用于判断用户是否有编辑或新建权限)
352354
//开启编辑时
353355
beginEdit: (row, column, index) => {

‎Vol.Vue/src/components/basic/VolTable.vue‎

Lines changed: 50 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@
1212
"
1313
@selection-change="selectionChange"
1414
@row-click="rowClick"
15-
@cell-mouse-leave="rowEndEdit"
15+
@header-click="headerClick"
16+
@cell-mouse-leave="
17+
(row, column, cell) => {
18+
!this.clickEdit && this.rowEndEdit(row, column, cell);
19+
}
20+
"
1621
ref="table"
1722
class="v-table"
1823
@sort-change="sortChange"
@@ -453,8 +458,10 @@ export default {
453458
this.summaryData.push("合计");
454459
this.columns.forEach((x, _index) => {
455460
if (!x.hidden) {
456-
this.summaryIndex[x.field] = _index;
461+
//this.summaryIndex[x.field] = _index;
462+
//2020.10.11修复求和列错位的问题
457463
this.summaryData.push("");
464+
this.summaryIndex[x.field] = this.summaryData.length;
458465
}
459466
//求和
460467
if (x.summary && !this.summary) {
@@ -516,10 +523,40 @@ export default {
516523
this.defaultLoadPage && this.load();
517524
},
518525
methods: {
519-
rowClick(row, column) {
526+
headerClick(column, event) {
527+
if (this.clickEdit && this.edit.rowIndex != -1) {
528+
if (
529+
this.rowEndEdit(
530+
this.url
531+
? this.rowData[this.edit.rowIndex]
532+
: this.tableData[this.edit.rowIndex],
533+
column
534+
)
535+
) {
536+
this.edit.rowIndex = -1;
537+
}
538+
}
539+
// this.edit.rowIndex = -1;
540+
},
541+
rowClick(row, column, event) {
520542
if (!this.doubleEdit) {
521543
return;
522544
}
545+
//点击其他行时，如果点击的行与正在编辑的行相同，保持编辑状态
546+
if (this.clickEdit && this.edit.rowIndex != -1) {
547+
if (row.elementIdex == this.edit.rowIndex) {
548+
//点击的单元格如果不可以编辑，直接结束编辑
549+
if (!this.columns.some((x) => x.field == event.property && x.edit)) {
550+
if (this.rowEndEdit(row, event)) {
551+
this.edit.rowIndex = -1;
552+
}
553+
}
554+
return;
555+
}
556+
if (this.rowEndEdit(row, event)) {
557+
this.edit.rowIndex = -1;
558+
}
559+
}
523560
this.rowBeginEdit(row, column);
524561
},
525562
dowloadFile(file) {
@@ -732,20 +769,20 @@ export default {
732769
return true;
733770
},
734771
rowEndEdit(row, column, event) {
735-
if (this.clickEdit) {
736-
return;
772+
if (this.clickEdit && event) {
773+
return true;
737774
}
738775
if (!this.enableEdit) {
739776
if (!this.errorFiled) {
740777
this.edit.rowIndex = -1;
741778
}
742-
return;
779+
return true;
743780
}
744781
if (!this.doubleEdit && event) {
745-
return;
782+
return true;
746783
}
747784
//结束编辑前
748-
if (!this.endEditBefore(row, column, this.edit.rowIndex)) return;
785+
if (!this.endEditBefore(row, column, this.edit.rowIndex)) return false;
749786
750787
if (
751788
this.edit.rowIndex != -1 &&
@@ -758,15 +795,15 @@ export default {
758795
return x.field == column.property;
759796
});
760797
if (!option || !option.edit) {
761-
return;
798+
return true;
762799
}
763800
if (
764801
option.edit.type == "datetime" ||
765802
option.edit.type == "date" ||
766803
option.edit.type == "select"
767804
) {
768805
if (this.edit.rowIndex == row.elementIdex) {
769-
return;
806+
return true;
770807
}
771808
}
772809
if (!this.validateColum(option, data)) {
@@ -777,11 +814,12 @@ export default {
777814
}
778815
}
779816
if (this.errorFiled) {
780-
return;
817+
return false;
781818
}
782-
if (!this.endEditAfter(row, column, this.edit.rowIndex)) return;
819+
if (!this.endEditAfter(row, column, this.edit.rowIndex)) return false;
783820
// this.errorFiled = "";
784821
this.edit.rowIndex = -1;
822+
return true;
785823
//this.edit.columnIndex=-1;
786824
},
787825
delRow() {

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@
183183
:endEditBefore="detailOptions.endEditBefore"
184184
:endEditAfter="detailOptions.endEditAfter"
185185
:summary="detailOptions.summary"
186+
:click-edit="detailOptions.clickEdit"
186187
></vol-table>
187188
</div>
188189
<!--明细footer自定义组件-->
@@ -348,6 +349,7 @@ var vueParam = {
348349
pagination: { total: 0, size: 100, sortName: "" }, //从表分页配置数据
349350
height: 0, //默认从表高度
350351
doubleEdit: true, //使用双击编辑
352+
clickEdit:false,//是否开启点击单元格编辑，点击其他行时结束编辑
351353
currentReadonly: false, //当前用户没有编辑或新建权限时，表单只读(可用于判断用户是否有编辑或新建权限)
352354
//开启编辑时
353355
beginEdit: (row, column, index) => {

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/VolTable.vue‎

Lines changed: 55 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@
1212
"
1313
@selection-change="selectionChange"
1414
@row-click="rowClick"
15-
@cell-mouse-leave="rowEndEdit"
15+
@header-click="headerClick"
16+
@cell-mouse-leave="
17+
(row, column, cell) => {
18+
!this.clickEdit && this.rowEndEdit(row, column, cell);
19+
}
20+
"
1621
ref="table"
1722
class="v-table"
1823
@sort-change="sortChange"
@@ -357,6 +362,10 @@ export default {
357362
type: Boolean, //是否双击启用编辑功能
358363
default: true,
359364
},
365+
clickEdit: {
366+
type: Boolean, //是否点击行编辑，再次点击行时结束编辑(默认点击行编辑，鼠标离开结束编辑)
367+
default: false,
368+
},
360369
beginEdit: {
361370
//编辑开始
362371
type: Function,
@@ -449,8 +458,10 @@ export default {
449458
this.summaryData.push("合计");
450459
this.columns.forEach((x, _index) => {
451460
if (!x.hidden) {
452-
this.summaryIndex[x.field] = _index;
461+
//this.summaryIndex[x.field] = _index;
462+
//2020.10.11修复求和列错位的问题
453463
this.summaryData.push("");
464+
this.summaryIndex[x.field] = this.summaryData.length;
454465
}
455466
//求和
456467
if (x.summary && !this.summary) {
@@ -512,10 +523,40 @@ export default {
512523
this.defaultLoadPage && this.load();
513524
},
514525
methods: {
515-
rowClick(row, column) {
526+
headerClick(column, event) {
527+
if (this.clickEdit && this.edit.rowIndex != -1) {
528+
if (
529+
this.rowEndEdit(
530+
this.url
531+
? this.rowData[this.edit.rowIndex]
532+
: this.tableData[this.edit.rowIndex],
533+
column
534+
)
535+
) {
536+
this.edit.rowIndex = -1;
537+
}
538+
}
539+
// this.edit.rowIndex = -1;
540+
},
541+
rowClick(row, column, event) {
516542
if (!this.doubleEdit) {
517543
return;
518544
}
545+
//点击其他行时，如果点击的行与正在编辑的行相同，保持编辑状态
546+
if (this.clickEdit && this.edit.rowIndex != -1) {
547+
if (row.elementIdex == this.edit.rowIndex) {
548+
//点击的单元格如果不可以编辑，直接结束编辑
549+
if (!this.columns.some((x) => x.field == event.property && x.edit)) {
550+
if (this.rowEndEdit(row, event)) {
551+
this.edit.rowIndex = -1;
552+
}
553+
}
554+
return;
555+
}
556+
if (this.rowEndEdit(row, event)) {
557+
this.edit.rowIndex = -1;
558+
}
559+
}
519560
this.rowBeginEdit(row, column);
520561
},
521562
dowloadFile(file) {
@@ -728,17 +769,20 @@ export default {
728769
return true;
729770
},
730771
rowEndEdit(row, column, event) {
772+
if (this.clickEdit && event) {
773+
return true;
774+
}
731775
if (!this.enableEdit) {
732776
if (!this.errorFiled) {
733777
this.edit.rowIndex = -1;
734778
}
735-
return;
779+
return true;
736780
}
737781
if (!this.doubleEdit && event) {
738-
return;
782+
return true;
739783
}
740784
//结束编辑前
741-
if (!this.endEditBefore(row, column, this.edit.rowIndex)) return;
785+
if (!this.endEditBefore(row, column, this.edit.rowIndex)) return false;
742786
743787
if (
744788
this.edit.rowIndex != -1 &&
@@ -751,15 +795,15 @@ export default {
751795
return x.field == column.property;
752796
});
753797
if (!option || !option.edit) {
754-
return;
798+
return true;
755799
}
756800
if (
757801
option.edit.type == "datetime" ||
758802
option.edit.type == "date" ||
759803
option.edit.type == "select"
760804
) {
761805
if (this.edit.rowIndex == row.elementIdex) {
762-
return;
806+
return true;
763807
}
764808
}
765809
if (!this.validateColum(option, data)) {
@@ -770,11 +814,12 @@ export default {
770814
}
771815
}
772816
if (this.errorFiled) {
773-
return;
817+
return false;
774818
}
775-
if (!this.endEditAfter(row, column, this.edit.rowIndex)) return;
819+
if (!this.endEditAfter(row, column, this.edit.rowIndex)) return false;
776820
// this.errorFiled = "";
777821
this.edit.rowIndex = -1;
822+
return true;
778823
//this.edit.columnIndex=-1;
779824
},
780825
delRow() {

0 commit comments

Comments
 (0)