Sobre el papel de la clave en vue
El atributo especial de clave se utiliza principalmente en el algoritmo DOM virtual de Vue para identificar vnodos al comparar nodos antiguos y nuevos.
Sin claves, Vue usa un algoritmo que minimiza los elementos dinámicos e intenta modificar/reutilizar elementos del mismo tipo en el lugar tanto como sea posible.
Al usar la clave, reorganizará el orden de los elementos en función del cambio de clave y eliminará los elementos cuya clave no exista.
Los elementos secundarios con el mismo padre deben tener claves únicas. Las claves duplicadas provocarán errores de representación .
Por lo tanto, al modificar el valor clave vinculado a la tabla, se puede activar la representación de la tabla el. Primero, vincula una clave a la tabla:
<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>Actualice el valor de la clave después de que cambien los datos:
async updataTableData(){
const res=await api.menu.tableData()
this.tableData=res.result //数据更新
this.rendertable=!this.rendertable //更新key的值
},