À propos du rôle de la clé dans vue
L'attribut spécial de clé est principalement utilisé dans l'algorithme DOM virtuel de Vue pour identifier les vnodes lors de la comparaison des anciens et des nouveaux nœuds.
Sans clés, Vue utilise un algorithme qui minimise les éléments dynamiques et essaie de modifier/réutiliser les éléments du même type sur place autant que possible.
Lors de l'utilisation de la clé, il réorganisera l'ordre des éléments en fonction du changement de clé et supprimera les éléments dont la clé n'existe pas.
Les éléments enfants avec le même parent doivent avoir des clés uniques. Les clés en double entraîneront des erreurs de rendu .
Par conséquent, en modifiant la valeur de la clé liée à la table, le nouveau rendu de la table el peut être déclenché. Tout d'abord, liez une clé à la table :
<el-table
:data="tableData"
border
height="600"
:key="rendertable" ——————给table绑定一个key
>
<el-table-column label="菜单" align="center">
<template slot-scope="scope">
<span class="bold">{
{ scope.row.name }}</span>
</template>
</el-table-column>
</el-table>Mettez à jour la valeur de la clé après la modification des données :
async updataTableData(){
const res=await api.menu.tableData()
this.tableData=res.result //数据更新
this.rendertable=!this.rendertable //更新key的值
},