您可以使用Ant
Design Vue的Table组件来实现
列表编辑功能。以下是一个示例代码，可以帮助您入门：
```vue
<template>
<div>
<a-button type="primary" @click="addRow">添加行</a-button>
<a-table :columns="columns" :data-source="dataSource" :row-key="record => record.id" :editable="editable">
<template slot="name" slot-scope="{ text, record, index }">
<a-input v-model="text" @change="handleChange(record, 'name')" />
</template>
<template slot="age" slot-scope="{ text, record, index }">
<a-input-number v-model="text" @change="handleChange(record, 'age')" />
</template>
<template slot="address" slot-scope="{ text, record, index }">
<a-input v-model="text" @change="handleChange(record, 'address')" />
</template>
<template slot="operation" slot-scope="{ text, record, index }">
<a v-if="editable[index]">
<a @click="save(index)">保存</a>
<a-divider type="vertical" />
<a @click="cancel(index)">取消</a>
</a>
<a v-else>
<a @click="edit(index)">编辑</a>
<a-divider type="vertical" />
<a @click="deleteRow(index)">删除</a>
</a>
</template>
</a-table>
</div>
</template>
<
script>
export default {
data() {
return {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
editable: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
editable: true,
},
{
title: "地址",
dataIndex: "address",
key: "address",
editable: true,
},
{
title: "操作",
key: "operation",
},
],
dataSource: [
{
id: 1,
name: "张三",
age: 18,
address: "北京市",
},
{
id: 2,
name: "李四",
age: 20,
address: "上海市",
},
],
editable: [],
};
},
methods: {
addRow() {
const newData = {
id: this.dataSource.length + 1,
name: "",
age: 0,
address: "",
};
this.dataSource.push(newData);
this.editable.push(true);
},
edit(index) {
this.editable.splice(index, 1, true);
},
deleteRow(index) {
this.dataSource.splice(index, 1);
this.editable.splice(index, 1);
},
save(index) {
this.editable.splice(index, 1, false);
},
cancel(index) {
if (this.dataSource[index].id === undefined) {
this.dataSource.splice(index, 1);
}
this.editable.splice(index, 1, false);
},
handleChange(record, key) {
record[key] = event.target.value;
},
},
};
</
script>
```
在这个示例中，我们使用了Ant
Design Vue的Table组件来展示一个包含姓名、年龄和地址的
列表。每一行数据都可以被编辑，当点击“编辑”按钮时，该行数据变为可编辑状态，在“姓名”、“年龄”和“地址”列中出现输入框，用户可以修改数据。当点击“保存”按钮时，该行数据变为不可编辑状态，修改后的数据被保存。如果用户不想保存修改，可以点击“取消”按钮，该行数据恢复到修改前的状态。
这里我们使用了一个editable数组来记录每一行数据的编辑状态。当用户点击“编辑”按钮时，我们将该行的editable值设为true，当用户点击“保存”或“取消”按钮时，我们将该行的editable值设为false。如果用户点击“删除”按钮，我们将该行数据从dataSource数组中删除，并且将该行的editable值从editable数组中删除。如果用户点击“添加行”按钮，我们创建一个新的空数据，并将其添加到dataSource数组末尾，同时将其editable值设为true。
在“姓名”、“年龄”和“地址”列中，我们使用了具名插槽来定义每一行数据的编辑组件。这里我们使用了Ant
Design Vue的Input、InputNumber和Divider组件。
总之，Ant
Design Vue的Table组件提供了很多强大的功能，可以帮助我们快速构建各种表格。如果您想了解更多关于Ant
Design Vue的Table组件的信息，可以参考官方文档：https://www.antdv.com/components/table-cn/
超级会员免费看
订阅专栏 解锁全文
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
