Previously, there were always table jam problems in projects built with vue and element. At first, I thought it was a problem caused by a large table base. Later, I wrote a demo on the official website and found that there was no such problem.
Since most of the data sent from the back end of the system are id or value values, the front end needs to traverse the data by itself, so I wrote multiple filters to achieve this.
In the subsequent investigation, it was found that the stuttering problem was caused by these filters, but if the table data did not change, how could it be rendered multiple times and executed the code in the filter?
I wrote a demo on the official website of element, and found that there were no multiple rendering problems, and the filter was only executed when the page was initially opened.
Very fascinating, after investigating many aspects of the problem, I found that the following two aspects are mainly caused
1. The previously cited element version is 2.7.2, and the table is re-rendered every time the mouse moves. At this point, the element 2.8.2 version is optimized, and the table is no longer rendered multiple times.
2. caused by show-overflow-tooltip
Solution:
1. The element of version 2.8.2 is cited (some styles and functions of version 2.9.1 have relatively large changes relative to 2.7.2, and there are more places to be modified for the system). Since our company's system is introduced, so To import the files unpkg.com/[email protected]/lib/index.js and //unpkg.com/[email protected]/lib/theme-chalk/index.css, download them to the local Don’t forget to download the fonts folder at the same time
element-icons.ttf（//unpkg.com/[email protected]/lib/theme-chalk/fonts/element-icons.ttf）
element-icons.woff(//unpkg.com/[email protected]/lib/theme-chalk/fonts/element-icons.woff)
2. Delete all show-overflow-tooltip
If you need to use it, you can choose each column of your own and add the tooltip to the template.
Or bind .cell to display title