Plan 1:
Add:key="()" to the table, but this method needs to trigger a hot update to refresh the data, such as saving
<el-table :key="()" :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">{{ }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="Trade Name" width="180">
<template #default="scope">
<el-popover effect="light" trigger="hover" placement="top" width="auto">
<template #default>
<div>name: {{ }}</div>
</template>
<template #reference>
<el-tag>{{ }}</el-tag>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="picture" 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="price" 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="operate">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, )">
Edit
</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, )">
Delete
</el-button>
</template>
</el-table-column>
</el-table>Plan 2:
Defined as responsive data
If defined as const goodsList = [ ], it will not refresh automatically
Just define it as const goodsList = ref([ ])
This is the end of this article about two solutions for automatic refresh after element table changes. For more content related to element table automatic refresh, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!