オプション 1:
key="Math.random()" をテーブルに追加しますが、このメソッドはホット アップデートをトリガーしてデータを更新する必要があります (保存など)。
<el-table :key="Math.random()" :data="goodsList" style="width: 100%">
<el-table-column label="ID" width="180">
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-left: 10px">{
{ scope.row.id }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="商品名" width="180">
<template #default="scope">
<el-popover effect="light" trigger="hover" placement="top" width="auto">
<template #default>
<div>name: {
{ scope.row.name }}</div>
</template>
<template #reference>
<el-tag>{
{ scope.row.name }}</el-tag>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="图片" width="180">
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-left: 10px">...</span>
</div>
</template>
</el-table-column>
<el-table-column label="价格" width="180">
<template #default="scope">
<div style="display: flex; align-items: center">
<span style="margin-left: 10px">{
{ scope.row.price }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
Delete
</el-button>
</template>
</el-table-column>
</el-table>
オプション II:
レスポンシブ データとして定義
const goodsList = [ ] と定義すると自動更新されない
const goodsList = ref([ ]) と定義するだけです