Ant Design Vue table编辑当前行

的数据后，如何及时更新表格中的数据？

您可以使用 Vue.js 的双向数据绑定功能，将数据绑定到表格的数据中，当数据发生改变时，表格会自动更新。代码如下：

<template>
<div>
<a-table :columns="columns" :data-source="tableData">
<template #name="{ record }">
<a v-show="editingKey !== record.key" @click="edit(record)">
Edit
</a>
<a v-show="editingKey === record.key" @click="save(record)">
Save
</a>
</template>
</a-table>
</div>
</template>

<script>
export default {
data() {
return {
editingKey: '',
tableData: [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
],
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
],
};
},
methods: {
edit(record) {
this.editingKey = record.key;
},
save(record) {
this.editingKey = '';
},
},
};
</script>

在上面的代码中，我们在表格的列中添加了一个编辑按钮和保存按钮，当用户点击编辑按钮时，会将该行的 key 设置为 editingKey 的值，代表用户正在编辑该行数据。当用户点击保存按钮时，会将 editingKey 的值清空，代表用户保存了该行数据。表格会自动更新编辑后的数据。