Ant Design Vue提供了一个 `a-table` 组件，可以非常方便地实现带有单元格编辑、
新增和删除
功能的表格。以下是一个简单的示例：
```vue
<template>
<div>
<a-table :columns="columns" :data-source="dataSource">
<template #name="text" #record="record" #index="index">
<a-input v-model:value="record.name" @change="handleInputChange(record, 'name')" />
</template>
<template #age="text" #record="record" #index="index">
<a-input-number v-model:value="record.age" @change="handleInputChange(record, 'age')" />
</template>
<template #action="text" #record="record" #index="index">
<a-popconfirm title="确定要删除吗？" @confirm="handleDelete(index)">
<a-button type="danger" icon="delete" />
</a-popconfirm>
</template>
<template #footer>
<a-button type="primary" @click="handleAdd">
新增</a-button>
</template>
</a-table>
</div>
</template>
<script>
import { ATable, AInput, AInputNumber, AButton, APopconfirm } from 'a-ui-components';
export default {
name: 'EditableTable',
components: {
ATable,
AInput,
AInputNumber,
AButton,
APopconfirm,
},
data() {
return {
columns: [
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '年龄', dataIndex: 'age', key: 'age' },
{ title: '操作', dataIndex: 'action', key: 'action' },
],
dataSource: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
],
nextId: 3,
};
},
methods: {
handleInputChange(record, field) {
// 更新数据源中的记录
const index = this.dataSource.findIndex(item => item.id === record.id);
this.dataSource[index][field] = record[field];
},
handleAdd() {
//
新增一条记录
this.dataSource.push({ id: this.nextId, name: '', age: '' });
this.nextId++;
},
handleDelete(index) {
// 删除一条记录
this.dataSource.splice(index, 1);
},
},
};
</script>
```
在这个示例中，我们定义了一个带有三列的表格：姓名、年龄和操作。姓名和年龄两列都可以进行单元格编辑，当用户修改单元格内容时，会触发 `handleInputChange` 方法，该方法会更新数据源中的记录。操作列中包含一个删除按钮，当用户点击该按钮时，会触发 `handleDelete` 方法，该方法会删除对应的记录。表格的底部还有一个
新增按钮，当用户点击该按钮时，会
新增一条空记录。
需要注意的是，我们在数据源中为每条记录都添加了一个唯一的 `id` 属性，这样在更新或删除记录时，我们可以根据 `id` 属性来查找对应的记录。同时，我们还定义了一个 `nextId` 属性，表示下一条记录的 `id` 值，每次
新增记录时，都会将 `nextId` 的值加一，以确保每条记录的 `id` 值都是唯一的。
希望这个示例能够帮助您实现带单元格编辑、
新增和删除
功能的表格。如果您有任何问题，请随时与我联系。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1081
