search

Happy-Coding-Clans / vue-easytable

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.
https://happy-coding-clans.github.io/vue-easytable/
MIT License
3.69k stars 738 forks source link

[Bug Report] Performance issue with fixed columns #411

Open stephantabor opened 2 years ago

stephantabor commented 2 years ago

I am opening an issue for

vue-easytable

Issue Type

Bug

Issue Title

Performance issue with fixed columns

library Version

2.9.0

Vue Type

2.6.14

Browser Type

Chrome Version 95.0.4638.54 (Official Build) (x86_64)

System version

MacOS 11.4

Reproduction url

https://stackblitz.com/edit/vuejs-starter-q8uzw6?file=table.js

Step to reproduce

  1. Open the example URL
  2. Copy the iframe url and open it in a new tab.
  3. Open your vue dev tools performance tab.
  4. Start recording performance.
  5. Click the button "Toggle Normal"
  6. Stop recording performance
  7. Observe the number of creates/updates/etc for VeTableBodyTd
  8. Repeat steps 4 through 7.
  9. Observe that the number of creates/updates/etc are the same as last time.
  10. Start recording performance.
  11. Click the button "Toggle Fixed Column".
  12. Stop recording performance.
  13. Observe the number of creates/updates/etc for VeTableBodyTd
  14. Repeat steps 10 through 13.
  15. Observe the number of updates is significantly higher than the first time (roughly [num cells] x [num columns])

What is expected?

Toggling <ve-table> with v-if should behave the same with fixed columns or without fixed colums

What is actually happening?

Toggling <ve-table> with v-if when fixed columns are present renders too many times leading to bad performance

Any additional comments? (optional)

I did not use code sandbox because it was extremely slow to the point of being unusable. stackblitz should suffice. Requiring users to use this form means they can't easily upload images and other features of the github issue creator.