About the role of key in vue
The special attribute of key is mainly used in Vue's virtual DOM algorithm to identify vnodes when comparing old and new nodes.
Without keys, Vue uses an algorithm that minimizes dynamic elements and tries to modify/reuse elements of the same type in-place as much as possible.
When using key, it will rearrange the order of elements based on the change of key, and will remove elements whose key does not exist.
Child elements with the same parent must have unique keys. Duplicate keys will cause rendering errors .
Therefore, by modifying the key value bound to the table, the re-rendering of the el-table can be triggered. First, bind a key to the 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>Update the value of the key after the data changes:
async updataTableData(){
const res=await api.menu.tableData()
this.tableData=res.result //数据更新
this.rendertable=!this.rendertable //更新key的值
},