Skip to content

Commit 04a26cd

Browse files
zhangdaiscottzhangdaiscott
committed
暂时回滚JVxeTable性能优化，有严重bug
1 parent 05caace commit 04a26cd

6 files changed

Lines changed: 170 additions & 249 deletions

File tree

‎jeecgboot-vue3/src/components/jeecg/JVxeTable/src/JVxeTable.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineComponent, h, nextTick, useSlots, shallowRef, markRaw } from 'vue';
1+
import { defineComponent, h, nextTick, ref, useSlots } from 'vue';
22
import { vxeEmits, vxeProps } from './vxe.data';
33
import { useData, useRefs, useResolveComponent as rc } from './hooks/useData';
44
import { useColumns } from './hooks/useColumns';
@@ -17,10 +17,7 @@ export default defineComponent({
1717
props: vxeProps(),
1818
emits: [...vxeEmits],
1919
setup(props: JVxeTableProps, context) {
20-
// update-begin--author:liaozhiyang---date:20260130---for:【QQYUN-14177】online配置界面，字段配置卡顿
21-
// 使用 shallowRef 优化大型对象响应式性能
22-
const instanceRef = shallowRef();
23-
// update-begin--author:liaozhiyang---date:20260130---for:【QQYUN-14177】online配置界面，字段配置卡顿
20+
const instanceRef = ref();
2421
const refs = useRefs();
2522
const slots = useSlots();
2623
const data = useData(props);
@@ -36,9 +33,6 @@ export default defineComponent({
3633
const finallyProps = useFinallyProps(props, data, methods);
3734
// 渲染子组件
3835
const renderComponents = useRenderComponents(props, data, methods, slots);
39-
// update-begin--author:liaozhiyang---date:20260130---for:【QQYUN-14177】online配置界面，字段配置卡顿
40-
markRaw(renderComponents);
41-
// update-end--author:liaozhiyang---date:20260130---for:【QQYUN-14177】online配置界面，字段配置卡顿
4236
return {
4337
instanceRef,
4438
...refs,

‎jeecgboot-vue3/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts‎

Lines changed: 85 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { JVxeColumn, JVxeDataProps, JVxeTableProps } from '../types';
2-
import { computed, nextTick, toRaw, shallowRef, markRaw } from 'vue';
2+
import { computed, nextTick, toRaw } from 'vue';
33
import { isArray, isEmpty, isPromise } from '/@/utils/is';
4-
import { cloneDeep, debounce } from 'lodash-es';
4+
import { cloneDeep } from 'lodash-es';
55
import { JVxeTypePrefix, JVxeTypes } from '../types/JVxeTypes';
66
import { initDictOptions } from '/@/utils/dict';
77
import { pushIfNotExist } from '/@/utils/common/compUtils';
@@ -24,129 +24,97 @@ export interface HandleArgs {
2424
}
2525

2626
export function useColumns(props: JVxeTableProps, data: JVxeDataProps, methods: JVxeTableMethods, slots) {
27-
// update-begin--author:liaozhiyang---date:20260130---for:【QQYUN-14177】online配置界面，字段配置卡顿
28-
// 使用 shallowRef 优化列数据响应式性能
29-
const columnsCache = shallowRef<JVxeColumn[]>([]);
30-
let lastColumnsHash = '';
31-
32-
// 计算列哈希值，用于缓存判断
33-
const getColumnsHash = (columns: JVxeColumn[]) => {
34-
return JSON.stringify(columns.map(col => ({ key: col.key, type: col.type, title: col.title })));
35-
};
36-
37-
// 防抖处理列计算，避免频繁重新计算
38-
const debouncedComputeColumns = debounce(() => {
39-
if (!isArray(props.columns)) {
40-
columnsCache.value = [];
41-
return;
42-
}
43-
44-
const currentHash = getColumnsHash(props.columns);
45-
if (currentHash === lastColumnsHash) {
46-
return; // 列没有变化，直接返回缓存
27+
data.vxeColumns = computed(() => {
28+
// linkageConfig变化时也需要执行
29+
const linkageConfig = toRaw(props.linkageConfig);
30+
if (linkageConfig) {
31+
// console.log(linkageConfig);
4732
}
33+
let columns: JVxeColumn[] = [];
34+
if (isArray(props.columns)) {
35+
// handle 方法参数
36+
const args: HandleArgs = { props, slots, data, methods, columns };
37+
let seqColumn, selectionColumn, expandColumn, dragSortColumn;
4838

49-
lastColumnsHash = currentHash;
50-
const columns: JVxeColumn[] = [];
51-
52-
// handle 方法参数
53-
const args: HandleArgs = { props, slots, data, methods, columns };
54-
let seqColumn, selectionColumn, expandColumn, dragSortColumn;
55-
56-
const handleColumn = (column: JVxeColumn, container: JVxeColumn[]) => {
57-
// 排除未授权的列 1 = 显示/隐藏； 2 = 禁用
58-
let auth = methods.getColAuth(column.key);
59-
if (auth?.type == '1' && !auth.isAuth) {
60-
return;
61-
} else if (auth?.type == '2' && !auth.isAuth) {
62-
column.disabled = true;
63-
}
64-
// type 不填，默认为 normal
65-
if (column.type == null || isEmpty(column.type)) {
66-
column.type = JVxeTypes.normal;
67-
}
68-
let col: JVxeColumn = cloneDeep(column);
69-
// 处理隐藏列
70-
if (col.type === JVxeTypes.hidden) {
71-
return handleInnerColumn(args, col, handleHiddenColumn);
72-
}
73-
// 处理子级列
74-
// 判断是否是分组列，如果当前是父级，则无需处理 render
75-
if (Array.isArray(col.children) && col.children.length > 0) {
76-
const children: JVxeColumn[] = [];
77-
col.children.forEach((child: JVxeColumn) => handleColumn(child, children));
78-
col.children = children;
79-
container.push(col);
80-
return;
81-
}
82-
// 组件未注册，自动设置为 normal
83-
if (!isRegistered(col.type)) {
84-
col.type = JVxeTypes.normal;
85-
}
86-
args.enhanced = getEnhanced(col.type);
87-
args.col = col;
88-
args.renderOptions = {
89-
bordered: props.bordered,
90-
disabled: props.disabled,
91-
scrolling: data.scrolling,
92-
isDisabledRow: methods.isDisabledRow,
93-
listeners: {
94-
trigger: (name, event) => methods.trigger(name, event),
95-
valueChange: (event) => methods.trigger('valueChange', event),
96-
/** 重新排序行 */
97-
rowResort: (event) => {
98-
methods.doSort(event.oldIndex, event.newIndex);
99-
methods.trigger('dragged', event);
39+
const handleColumn = (column: JVxeColumn, container: JVxeColumn[]) => {
40+
// 排除未授权的列 1 = 显示/隐藏； 2 = 禁用
41+
let auth = methods.getColAuth(column.key);
42+
if (auth?.type == '1' && !auth.isAuth) {
43+
return;
44+
} else if (auth?.type == '2' && !auth.isAuth) {
45+
column.disabled = true;
46+
}
47+
// type 不填，默认为 normal
48+
if (column.type == null || isEmpty(column.type)) {
49+
column.type = JVxeTypes.normal;
50+
}
51+
let col: JVxeColumn = cloneDeep(column);
52+
// 处理隐藏列
53+
if (col.type === JVxeTypes.hidden) {
54+
return handleInnerColumn(args, col, handleHiddenColumn);
55+
}
56+
// 处理子级列
57+
// 判断是否是分组列，如果当前是父级，则无需处理 render
58+
if (Array.isArray(col.children) && col.children.length > 0) {
59+
const children: JVxeColumn[] = [];
60+
col.children.forEach((child: JVxeColumn) => handleColumn(child, children));
61+
col.children = children;
62+
container.push(col);
63+
return;
64+
}
65+
// 组件未注册，自动设置为 normal
66+
if (!isRegistered(col.type)) {
67+
col.type = JVxeTypes.normal;
68+
}
69+
args.enhanced = getEnhanced(col.type);
70+
args.col = col;
71+
args.renderOptions = {
72+
bordered: props.bordered,
73+
disabled: props.disabled,
74+
scrolling: data.scrolling,
75+
isDisabledRow: methods.isDisabledRow,
76+
listeners: {
77+
trigger: (name, event) => methods.trigger(name, event),
78+
valueChange: (event) => methods.trigger('valueChange', event),
79+
/** 重新排序行 */
80+
rowResort: (event) => {
81+
methods.doSort(event.oldIndex, event.newIndex);
82+
methods.trigger('dragged', event);
83+
},
84+
/** 在当前行下面插入一行 */
85+
rowInsertDown: (rowIndex) => methods.insertRows({}, rowIndex + 1),
10086
},
101-
/** 在当前行下面插入一行 */
102-
rowInsertDown: (rowIndex) => methods.insertRows({}, rowIndex + 1),
103-
},
104-
};
105-
if (col.type === JVxeTypes.rowNumber) {
106-
seqColumn = col;
107-
container.push(col);
108-
} else if (col.type === JVxeTypes.rowRadio || col.type === JVxeTypes.rowCheckbox) {
109-
selectionColumn = col;
110-
container.push(col);
111-
} else if (col.type === JVxeTypes.rowExpand) {
112-
expandColumn = col;
113-
container.push(col);
114-
} else if (col.type === JVxeTypes.rowDragSort) {
115-
dragSortColumn = col;
116-
container.push(col);
117-
} else {
118-
col.params = column;
119-
args.columns = container;
120-
handlerCol(args);
87+
};
88+
if (col.type === JVxeTypes.rowNumber) {
89+
seqColumn = col;
90+
container.push(col);
91+
} else if (col.type === JVxeTypes.rowRadio || col.type === JVxeTypes.rowCheckbox) {
92+
selectionColumn = col;
93+
container.push(col);
94+
} else if (col.type === JVxeTypes.rowExpand) {
95+
expandColumn = col;
96+
container.push(col);
97+
} else if (col.type === JVxeTypes.rowDragSort) {
98+
dragSortColumn = col;
99+
container.push(col);
100+
} else {
101+
col.params = column;
102+
args.columns = container;
103+
handlerCol(args);
104+
}
121105
}
122-
}
123-
124-
props.columns.forEach((column: JVxeColumn) => handleColumn(column, columns));
125106

126-
handleInnerColumn(args, seqColumn, handleSeqColumn);
127-
handleInnerColumn(args, selectionColumn, handleSelectionColumn);
128-
handleInnerColumn(args, expandColumn, handleExpandColumn);
129-
handleInnerColumn(args, dragSortColumn, handleDragSortColumn, true);
130-
// update-begin--author:liaozhiyang---date:2024-05-30---for【TV360X-371】不可编辑组件必填缺少*号
131-
customComponentAddStar(columns);
132-
// update-end--author:liaozhiyang---date:2024-05-30---for：【TV360X-371】不可编辑组件必填缺少*号
107+
props.columns.forEach((column: JVxeColumn) => handleColumn(column, columns));
133108

134-
// 标记为原始对象，避免深度响应式
135-
columnsCache.value = markRaw(columns);
136-
}, 16); // 16ms 防抖，约等于一帧的时间
137-
138-
data.vxeColumns = computed(() => {
139-
// 【issues/7812】linkageConfig改变了，vxetable没更新
140-
// linkageConfig变化时也需要执行
141-
const linkageConfig = toRaw(props.linkageConfig);
142-
if (linkageConfig) {
143-
// console.log(linkageConfig);
109+
handleInnerColumn(args, seqColumn, handleSeqColumn);
110+
handleInnerColumn(args, selectionColumn, handleSelectionColumn);
111+
handleInnerColumn(args, expandColumn, handleExpandColumn);
112+
handleInnerColumn(args, dragSortColumn, handleDragSortColumn, true);
113+
// update-begin--author:liaozhiyang---date:2024-05-30---for【TV360X-371】不可编辑组件必填缺少*号
114+
customComponentAddStar(columns);
144115
}
145-
// 触发防抖计算
146-
debouncedComputeColumns();
147-
return columnsCache.value;
116+
return columns;
148117
});
149-
// update-end--author:liaozhiyang---date:20260130---for:【QQYUN-14177】online配置界面，字段配置卡顿
150118
}
151119

152120
/**

0 commit comments

Comments
 (0)