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.

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

[Bug Report] el-table fucntion about lazy load data in same time will make a mistake #21034

Closed
superchangme opened this issue May 29, 2021 · 2 comments · Fixed by #21041
Closed
Assignees

Comments

@superchangme
Copy link

Element UI version

2.15.2

OS/Browsers version

win10

Vue version

2.6.12

Reproduction Link

https://codepen.io/superchangme/project/editor/DOrgje

Steps to reproduce

1.点击第一个加载更多按钮
2.在3s内(第一个数据加载完成前)点击第二个加载更多按钮

What is Expected?

期望3s后,5s后,两个数据都能正常加载

What is actually happening?

发现第二个加载状态一直处于loading状态

@element-bot
Copy link
Member

Translation of this issue:

Element UI version

2.15.2

OS/Browsers version

win10

Vue version

2.6.12

Reproduction Link

https://codepen.io/superchangme/project/editor/DOrgje

Steps to reproduce

  1. Click the first load more button

  2. Click the second load more button within 3S (before the completion of the first data load)

What is Expected?

It is expected that both data can be loaded normally after 3S and 5S

What is actually happening?

It is found that the second loading state is always in the loading state

@superchangme
Copy link
Author

superchangme commented May 29, 2021

以上为bug现象,经分析,是由于在loadData方法内,使用了对象劫持treeData(指针指向),在第一次点击后数据加载后treeData数据被指向了newTreeData,当第二次数据回来时修改的还是treeData,故无法正确设置loading状态。

以下为修改意见

修改代码
packages/table/src/store/tree.js loadData方法

loadData(row, key, treeNode) {
      const { load } = this.table;
      const { lazyTreeNodeMap, treeData } = this.states;
      if (load && !treeData[key].loaded) {
        treeData[key].loading = true;
        load(row, treeNode, data => {
          if (!Array.isArray(data)) {
            throw new Error('[ElTable] data must be an array');
          }
         // FIXME add this line to fix treeData pointer to the newTreeData!
         const { treeData } = this.states;
          treeData[key].loading = false;
          treeData[key].loaded = true;
          treeData[key].expanded = true;
          if (data.length) {
            this.$set(lazyTreeNodeMap, key, data);
          }
          this.table.$emit('expand-change', row, true);
        });
      }
    }

@cs1707 cs1707 self-assigned this Jun 3, 2021
@cs1707 cs1707 mentioned this issue Jun 3, 2021
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants