antdesignvue列表编辑

您可以使用Ant Design Vue的Table组件来实现列表编辑功能。以下是一个示例代码，可以帮助您入门：

<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/