Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(table): resolve colspan handling for multi-header #4669

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+20 −9
Open

fix(table): resolve colspan handling for multi-header #4669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/table/_example/multi-header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ function getColumns(fixedLeftCol, fixedRightCol) {
title: '审批单号',
fixed: fixedRightCol ? 'right' : undefined,
width: 120,
// colspan: 2,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的功能，还继续支持吗？
支持的话，代码恢复保留。
不支持的话，希望可以兼容处理，为曾经使用过的同学保留正确运行

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的功能依然是支持的，这里注释其实是为了不影响现有的文档，主要是感觉没必要再新增一个说明的文档，所以直接在多级表头的表格的demo下增加了一个// colspan: 注释，或许可以增加个注释说明。当然，如果要移除的话，其实也不会有什么问题。

},
{
colKey: 'detail.email',
Expand Down
28 changes: 19 additions & 9 deletions src/table/thead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,17 +77,27 @@ export default defineComponent({
// 单行表格合并
const colspanSkipMap = computed(() => {
const map: { [key: string]: boolean } = {};
const list = props.thList[0];
for (let i = 0, len = list.length; i < len; i++) {
const item = list[i];
if (item.colspan > 1) {
for (let j = i + 1; j < i + item.colspan; j++) {
if (list[j]) {
map[list[j].colKey] = true;

const processColumns = (columns: BaseTableColumns) => {
columns.forEach((item, i) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果不是非必要，计算量大的表格里面，尽量减少 forEach 这类函数方法的使用

for 循环直接遍历，不需要创建函数，不需要创建函数的上下文

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

非常赞同，这里是少考虑了数据量的问题，数据量一旦过大的话在性能和内存占用上，forEach的却会有更大的开销，这里我一会到家调整下。

if (item.colspan > 1) {
for (let j = 1; j < item.colspan; j++) {
const nextIndex = i + j;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果逻辑一样的话，
提前一次性在循环体里面计算好 j 的位置，会不会比每次进入循环之后再重复执行 加运算会快些

if (columns[nextIndex]) {
map[columns[nextIndex].colKey] = true;
}
}
}
}
}
// 如果有子列，递归处理
if (item.children) {
processColumns(item.children);
}
});
};

const list = props.thList[0];
processColumns(list);

return map;
});

Expand Down
Loading