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

【卡顿现象】ListTable在列数较多的情况下,竖向滚动条拖动卡顿 #1840

Closed
mzhang-eric opened this issue May 31, 2024 · 0 comments · Fixed by #1855
Closed
Assignees

Comments

@mzhang-eric
Copy link

ListTable 当列数较多的情况下,竖向滚动条拖动滑块会出现卡顿现象(鼠标滚轮滚动表现流畅,但拖动滑块卡顿),如下面提供的 option 设置为1W*100列可以发现拖动卡顿,实际测试发现列数超过50列也能感觉到有卡顿现象。

image

使用 option 如下:

 function generateRandomString(length) {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    for (let i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result;
  }

  const generateRecords = (count) => Array.from(new Array(count)).map((_, i) => {
    const first = generateRandomString(10);
    const last = generateRandomString(4);
    return {
      id: i + 1,
      email: `${first}_${last}@xxx.com`,
      name: first,
      lastName: last,
      fullName: `${first}${last}`,
      hobbies: generateRandomString(10),
      birthday: generateRandomString(10),
      tel: generateRandomString(10),
      sex: i % 2 === 0 ? 'boy' : 'girl',
      work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
      city: 'beijing',
      position: 'employee',
    };
  });

  const records = generateRecords(10000);

  // 基础配置有10列
  const baseColumns = [
    {
      field: 'id',
      title: 'ID',
      width: 80,
      sort: true,
    },
    {
      field: 'email',
      title: 'email',
      width: 240,
      sort: false,
    },
    {
      field: 'fullName',
      title: 'Full name',
      width: 240,
      sort: false,
    },
    {
      field: 'hobbies',
      title: 'hobbies',
      width: 200,
    },
    {
      field: 'birthday',
      title: 'birthday',
      width: 120,
    },
    {
      field: 'sex',
      title: 'sex',
      width: 100,
    },
    {
      field: 'tel',
      title: 'telephone',
      width: 150,
    },
    {
      field: 'work',
      title: 'job',
      width: 200,
    },
    {
      field: 'city',
      title: 'city',
      width: 150,
    },
    {
      field: 'position',
      title: 'position',
      width: 150,
    },
  ];

  // 100列
  let columns = [];
  for (let i = 0; i < 10; i++) {
    columns = columns.concat(baseColumns);
  }

  const option = {
    records,
    columns,
  };
@Rui-Sun Rui-Sun linked a pull request Jun 4, 2024 that will close this issue
21 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.

2 participants