Skip to content

Commit cedfada

Browse files
author
黄书伟
committed
1、新增 table 组件设置背景色功能
 2、优化 table 组件行点击变色功能由状态管理形式改为状态管理与dom操作结合的形式（解决上万条数据行浮动卡顿、内存飙升的问题） 3、优化 table 组件行浮动变色功能由状态管理形式改为状态管理与dom操作结合的形式（解决上万条数据行浮动卡顿、内存飙升的问题） 4、优化 table 组件当没有checkbox 多选功能时关闭相关检查
1 parent ebccab0 commit cedfada

File tree

9 files changed

+308
-148
lines changed

9 files changed

+308
-148
lines changed

‎libs/v-table/src/checkbox-selection-mixin.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
"use strict";
1+
'use strict';
22

33
Object.defineProperty(exports, "__esModule", {
44
value: true
@@ -36,6 +36,13 @@ exports.default = {
3636

3737
return _this.checkboxGroupModel.indexOf(index) > -1;
3838
});
39+
},
40+
hasSelectionColumns: function hasSelectionColumns() {
41+
42+
return this.internalColumns.some(function (x) {
43+
44+
return x.type && x.type === 'selection';
45+
});
3946
}
4047
},
4148

@@ -133,6 +140,10 @@ exports.default = {
133140
updateCheckboxGroupModel: function updateCheckboxGroupModel() {
134141
var _this3 = this;
135142

143+
if (!this.hasSelectionColumns) {
144+
return false;
145+
}
146+
136147
this.checkboxGroupModel = [];
137148

138149
this.internalTableData.filter(function (item, index) {

‎libs/v-table/src/scroll-control-mixin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,6 @@ exports.default = {
6363

6464
_utils2.default.unbind(body1, 'mousewheel', this.body1Mousewheel);
6565
_utils2.default.unbind(body2, 'scroll', this.body2Scroll);
66-
_utils2.default.bind(rightViewFooter, 'scroll', this.rightViewFooterScroll);
66+
_utils2.default.unbind(rightViewFooter, 'scroll', this.rightViewFooterScroll);
6767
}
6868
};

‎libs/v-table/src/table-row-mouse-events-mixin.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = {
7+
data: function data() {
8+
9+
return {
10+
11+
hoverRowIndex: -1,
12+
clickRowIndex: -1
13+
};
14+
},
15+
16+
17+
methods: {
18+
handleMouseEnter: function handleMouseEnter(rowIndex) {
19+
20+
if (this.rowHoverColor && this.rowHoverColor.length > 0) {
21+
22+
this.hoverRowIndex = rowIndex;
23+
}
24+
25+
this.rowMouseEnter && this.rowMouseEnter(rowIndex);
26+
},
27+
handleMouseOut: function handleMouseOut(rowIndex) {
28+
29+
if (this.rowHoverColor && this.rowHoverColor.length > 0) {
30+
31+
this.hoverRowIndex = -1;
32+
}
33+
34+
this.rowMouseLeave && this.rowMouseLeave(rowIndex);
35+
},
36+
onCellClick: function onCellClick(rowIndex, rowData, column) {
37+
38+
if (this.rowClickColor && this.rowClickColor.length > 0) {
39+
40+
this.clickRowIndex = rowIndex;
41+
}
42+
43+
this.onRowClick && this.onRowClick(rowIndex, rowData, column);
44+
},
45+
getHighPriorityBgColor: function getHighPriorityBgColor(rowIndex) {
46+
47+
var result = '';
48+
49+
if (this.clickRowIndex === rowIndex) {
50+
51+
result = this.rowClickColor;
52+
} else if (this.hoverRowIndex === rowIndex) {
53+
54+
result = this.rowHoverColor;
55+
}
56+
57+
if (result.length <= 0) {
58+
59+
if (this.evenBgColor && this.evenBgColor.length > 0 || this.oddBgColor && this.oddBgColor.length > 0) {
60+
61+
result = (rowIndex + 1) % 2 === 0 ? this.evenBgColor : this.oddBgColor;
62+
}
63+
}
64+
65+
if (result.length <= 0) {
66+
67+
result = this.tableBgColor;
68+
}
69+
70+
return result;
71+
},
72+
setRowBgColor: function setRowBgColor(newVal, oldVal, color) {
73+
var _this = this;
74+
75+
var el = this.$el;
76+
77+
if (!el) {
78+
return false;
79+
}
80+
81+
var rowsCollection = [],
82+
oldRow = void 0,
83+
newRow = void 0;
84+
85+
if (this.hasFrozenColumn) {
86+
87+
rowsCollection.push(el.querySelectorAll('.v-table-leftview .v-table-row'));
88+
}
89+
90+
rowsCollection.push(el.querySelectorAll('.v-table-rightview .v-table-row'));
91+
92+
rowsCollection.forEach(function (rows) {
93+
94+
oldRow = rows[oldVal];
95+
newRow = rows[newVal];
96+
97+
if (oldRow) {
98+
99+
oldRow.style.backgroundColor = _this.getHighPriorityBgColor(oldVal);
100+
}
101+
102+
if (newRow) {
103+
104+
newRow.style.backgroundColor = color;
105+
}
106+
});
107+
}
108+
},
109+
110+
watch: {
111+
112+
'hoverRowIndex': function hoverRowIndex(newVal, oldVal) {
113+
114+
this.setRowBgColor(newVal, oldVal, this.rowHoverColor);
115+
},
116+
117+
'clickRowIndex': function clickRowIndex(newVal, oldVal) {
118+
119+
this.setRowBgColor(newVal, oldVal, this.rowClickColor);
120+
}
121+
}
122+
};

‎libs/v-table/src/table.vue‎

Lines changed: 16 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="v-table-views v-table-class" :style="{'width': internalWidth+'px', 'height': getTableHeight+'px'}">
2+
<div class="v-table-views v-table-class" :style="{'width': internalWidth+'px', 'height': getTableHeight+'px','background-color':tableBgColor}">
33
<!--左列-->
44
<template v-if="frozenCols.length > 0">
55
<div class="v-table-leftview" :style="{'width':leftViewWidth+'px'}">
@@ -75,7 +75,7 @@
7575
<table class="v-table-btable" cellspacing="0" cellpadding="0" border="0">
7676
<tbody>
7777
<tr v-for="(item,rowIndex) in internalTableData" class="v-table-row"
78-
:style="[trBgColor(rowIndex+1),setRowHoverColor(item.__mouseenter__),setRowClickColor(item.__columnCellClick__)]"
78+
:style="[trBgColor(rowIndex+1)]"
7979
@mouseenter.stop="handleMouseEnter(rowIndex)"
8080
@mouseleave.stop="handleMouseOut(rowIndex)">
8181
<td v-if="cellMergeInit(rowIndex,col.field,item,true)"
@@ -222,7 +222,7 @@
222222
<table class="v-table-btable" cellspacing="0" cellpadding="0" border="0">
223223
<tbody>
224224
<tr :key="rowIndex" v-for="(item,rowIndex) in internalTableData" class="v-table-row"
225-
:style="[trBgColor(rowIndex+1),setRowHoverColor(item.__mouseenter__),setRowClickColor(item.__columnCellClick__)]"
225+
:style="[trBgColor(rowIndex+1)]"
226226
@mouseenter.stop="handleMouseEnter(rowIndex)"
227227
@mouseleave.stop="handleMouseOut(rowIndex)"
228228
>
@@ -327,6 +327,7 @@
327327
import checkboxSelectionMixin from './checkbox-selection-mixin.js'
328328
import tableFooterMixin from './table-footer-mixin.js'
329329
import scrollBarControlMixin from './scroll-bar-control-mixin.js'
330+
import tableRowMouseEventsMixin from './table-row-mouse-events-mixin'
330331
331332
import utils from '../../src/utils/utils.js'
332333
import deepClone from '../../src/utils/deepClone.js'
@@ -338,7 +339,7 @@
338339
339340
export default {
340341
name: 'v-table',
341-
mixins: [classesMixin, tableResizeMixin, frozenColumnsMixin, scrollControlMixin, sortControlMixin, tableEmptyMixin, dragWidthMixin, cellEditMixin, bodyCellMergeMixin, titleCellMergeMixin, checkboxSelectionMixin, tableFooterMixin, scrollBarControlMixin],
342+
mixins: [classesMixin, tableResizeMixin, frozenColumnsMixin, scrollControlMixin, sortControlMixin, tableEmptyMixin, dragWidthMixin, cellEditMixin, bodyCellMergeMixin, titleCellMergeMixin, checkboxSelectionMixin, tableFooterMixin, scrollBarControlMixin,tableRowMouseEventsMixin],
342343
components: {tableEmpty, loading, VCheckboxGroup, VCheckbox},
343344
data(){
344345
return {
@@ -363,7 +364,6 @@
363364
width: [Number, String],
364365
minWidth: {
365366
type: Number,
366-
require: false,
367367
default: 50
368368
},
369369
height: {
@@ -372,24 +372,20 @@
372372
},
373373
minHeight: {
374374
type: Number,
375-
require: false,
376375
default: 50
377376
},
378377
titleRowHeight: {
379378
type: Number,
380-
require: false,
381379
default: 38
382380
},
383381
// 随着浏览器窗口改变，横向自适应
384382
isHorizontalResize: {
385383
type: Boolean,
386-
require: false,
387384
default: false
388385
},
389386
// 随着浏览器窗口改变，垂直自适应
390387
isVerticalResize: {
391388
type: Boolean,
392-
require: false,
393389
default: false
394390
},
395391
@@ -399,32 +395,35 @@
399395
default: 0
400396
},
401397
398+
tableBgColor:{
399+
type: String,
400+
default: '#fff'
401+
},
402+
402403
// 表头背景颜色
403404
titleBgColor: {
404405
type: String,
405-
require: false,
406406
default: '#fff'
407407
},
408408
409409
// 奇数行颜色
410410
oddBgColor: {
411411
type: String,
412-
default: '#fff'
412+
default: ''
413413
},
414414
// 偶数行颜色
415415
evenBgColor: {
416-
type: String
416+
type: String,
417+
default: ''
417418
},
418419
// 内容行高
419420
rowHeight: {
420421
type: Number,
421-
require: false,
422422
default: 40
423423
},
424424
// 多列排序
425425
multipleSort: {
426426
type: Boolean,
427-
require: false,
428427
default: true
429428
},
430429
columns: {
@@ -491,7 +490,6 @@
491490
},
492491
footerRowHeight: {
493492
type: Number,
494-
require: false,
495493
default: 40
496494
},
497495
columnWidthDrag: {
@@ -621,63 +619,19 @@
621619
this.$emit('on-custom-comp', params);
622620
},
623621
624-
setRowHoverColor(isMouseenter){
625-
626-
if (this.rowHoverColor && this.rowHoverColor.length > 0 && isMouseenter) {
627-
628-
return {'background-color': this.rowHoverColor};
629-
}
630-
},
631-
632-
setRowClickColor(isColumnCellClick){
633-
634-
if (this.rowClickColor && this.rowClickColor.length > 0 && isColumnCellClick) {
635-
636-
return {'background-color': this.rowClickColor};
637-
}
638-
},
639-
640622
// 行颜色
641623
trBgColor(num){
642624
if ((this.evenBgColor && this.evenBgColor.length > 0) || (this.oddBgColor && this.oddBgColor.length > 0)) {
643625
return num % 2 === 0 ? {'background-color': this.evenBgColor} : {'background-color': this.oddBgColor};
644626
}
645627
},
646628
647-
handleMouseEnter(rowIndex){
648-
649-
this.internalTableData[rowIndex].__mouseenter__ = true;
650-
this.rowMouseEnter && this.rowMouseEnter(rowIndex);
651-
},
652-
653-
handleMouseOut(rowIndex){
654-
655-
this.internalTableData[rowIndex].__mouseenter__ = false;
656-
this.rowMouseLeave && this.rowMouseLeave(rowIndex);
657-
},
658-
659629
// 设置 column 列的样式
660630
setColumnCellClassName(rowIndex, field, rowData){
661631
662632
return this.columnCellClassName && this.columnCellClassName(rowIndex, field, rowData);
663633
},
664634
665-
//点击数据行时，回调点击事件
666-
onCellClick(rowIndex, rowData, column){
667-
if (Array.isArray(this.internalTableData) && this.internalTableData.length > 0) {
668-
669-
var clickCell = this.internalTableData.find(x => x.__columnCellClick__);
670-
671-
if (clickCell) {
672-
clickCell.__columnCellClick__ = false;
673-
}
674-
675-
this.internalTableData[rowIndex].__columnCellClick__ = true;
676-
}
677-
678-
this.onRowClick && this.onRowClick(rowIndex, rowData, column);
679-
},
680-
681635
// 获取每个表头列的宽度
682636
titleColumnWidth(fields){
683637
var result = 0;
@@ -804,17 +758,7 @@
804758
805759
initInternalTableData(data){
806760
807-
var result = Array.isArray(this.tableData) ? deepClone(this.tableData) : [];
808-
809-
if (result.length > 0) {
810-
811-
result.map(x => {
812-
x.__mouseenter__ = false;
813-
x.__columnCellClick__ = false;
814-
})
815-
}
816-
817-
return result;
761+
return Array.isArray(this.tableData) ? deepClone(this.tableData) : [];
818762
},
819763
820764
// 对外暴露（隐藏显示切换时）
@@ -830,13 +774,13 @@
830774
831775
this.internalTableData = this.initInternalTableData(this.tableData);
832776
833-
this.updateCheckboxGroupModel();
834-
835777
if (Array.isArray(this.columns) && this.columns.length > 0) {
836778
837779
this.initColumns();
838780
}
839781
782+
this.updateCheckboxGroupModel();
783+
840784
this.$nextTick(x => {
841785
this.initView();
842786
})

0 commit comments

Comments
 (0)