Vue+iviewUI Table rows can be edited by clicking, but when there is a large amount of data, the table stutters.

clipboard.png
4023

clipboard.png
Program Logic:
when you click on a line, assign the corresponding number of lines [index] to the [edittingCellId] variable, and then match the corresponding number of lines in a more corresponding state.


Table Editing data suggests pop-up boxes to modify


vue, a responsive framework that doesn't seem to perform very well in the face of large amounts of data. There is too much data to deal with, so if you change it, you have to render it again.


clipboard.png
has solved the stutter problem. I can change the status by adding a click event to the table body, detecting the corresponding cell, and then changing the corresponding class.
does not need to re-render in this way, but loading the table earlier will be slower than before, but I have already achieved the effect I need.


40 entries can be stuck for 2 or 3 seconds, which means that the solution you have implemented is not very good, and you should not walk so slowly.

< hr >

I changed it with the example of the official website, and 40 + items of data didn't take 2 or 3 seconds as you said. This is still the development mode
https://codesandbox.io/s/jv30...

.

you are recommended to use umy-ui https://www.umyui.com/

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e73c7c-46269.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e73c7c-46269.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?