preface
The purpose of this article is to document some of the problems I have encountered using elementUI and the solutions I have found through my dismissive efforts. Will continue to update ~
The common usage of el-table and V-IF causes data error
Problem description: Two table components were switched by V-IF control. As a result, data errors were found during the switching process.
The phenomenon is shown as follows:
You can see that the data has been corrupted during the switch. For example, the name of test2 does not exist during the switch, and the style of test1 is also wrong.
The main reason for this is that elementUI’s tables are generated in a loop, and Vue’s update mechanism causes DOM reuse. Remember from Vue diff that the sameVnode method determines whether two nodes have the same key or not, so consider adding a key to each table to tell Vue that this cannot be reused.
Add a key to the table