ant design vue 的table实现一列多个值可编辑可新增

Ant Design Vue 的 Table 组件提供了可编辑、可新增、可删除等功能，可以很方便地实现一列多个值的表格。下面是实现步骤：

1. 在页面中引入 Table 组件并配置表头。在表头中定义需要展示的列，例如：字段1、字段2、字段3。

<template>
  <a-table :columns="columns" :data-source="dataSource"></a-table>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            title: '字段1',
            dataIndex: 'field1',
            key: 'field1'
          },
          {
            title: '字段2',
            dataIndex: 'field2',
            key: 'field2'
          },
          {
            title: '字段3',
            dataIndex: 'field3',
            key: 'field3'
          }
        ],
        dataSource: []
      }
    }
  }
</script>

2. 在 dataSource 中初始化一行空白数据，作为新增数据使用。

data() {
  return {
    columns: [...],
    dataSource: [
      {
        key: '0',
        field1: '',
        field2: '',
        field3: ''
      }
    ]
  }
}

3. 针对每一行数据，可以添加一个编辑按钮或者直接在单元格中添加编辑功能，让用户可以对数据进行修改。这里我们采用在单元格中添加编辑功能的方式，使用 Editable Cell 和 Editable Row 组件来实现。

<template>
  <a-table :columns="columns" :data-source="dataSource" :components="components">
    <template #body="tableProps">
      <editable-row :record="tableProps.record" :index="tableProps.index">
        <a-table-cell
          v-for="column in columns"
          :key="column.dataIndex"
          :dataIndex="column.dataIndex"
          :record="tableProps.record"
          :editable="column.editable"
          @update="handleUpdate"
        >
          {{ tableProps.record[column.dataIndex] }}
        </a-table-cell>
      </editable-row>
    </template>
  </a-table>
</template>

<script>
  import { EditableRow, EditableCell } from 'ant-design-vue';

  export default {
    components: {
      EditableRow,
      EditableCell
    },
    data() {
      return {
        columns: [...],
        dataSource: [
          {
            key: '0',
            field1: '',
            field2: '',
            field3: ''
          }
        ]
      }
    },
    methods: {
      handleUpdate(record, dataIndex, value) {
        const index = this.dataSource.findIndex(item => item.key === record.key);
        this.dataSource[index][dataIndex] = value;
      }
    }
  }
</script>

在这个例子中，我们使用了 Editable Cell 和 Editable Row 组件来实现单元格和行的编辑功能。其中，Editable Cell 组件用于渲染单元格内容，Editable Row 组件用于渲染整行数据。我们给每个需要编辑的单元格添加了 editable 属性以及 update 事件，当用户修改单元格内容时，会触发 update 事件，我们可以在这个事件中更新 dataSource 中对应的数据。

4. 当用户点击新增按钮时，可以在表格中添加一行空白行，并让用户输入新的数据。同时，也要提供一个保存按钮，让用户可以保存新增的数据。这里我们通过添加一个按钮来实现新增功能，并在按钮点击事件中向 dataSource 中添加一行空白数据。

<template>
  <div>
    <a-button type="primary" @click="handleAdd">新增</a-button>
    <br /><br />
    <a-table :columns="columns" :data-source="dataSource" :components="components">
      <template #body="tableProps">
        <editable-row :record="tableProps.record" :index="tableProps.index">
          <a-table-cell
            v-for="column in columns"
            :key="column.dataIndex"
            :dataIndex="column.dataIndex"
            :record="tableProps.record"
            :editable="column.editable"
            @update="handleUpdate"
          >
            {{ tableProps.record[column.dataIndex] }}
          </a-table-cell>
        </editable-row>
      </template>
    </a-table>
  </div>
</template>

<script>
  import { EditableRow, EditableCell } from 'ant-design-vue';

  export default {
    components: {
      EditableRow,
      EditableCell
    },
    data() {
      return {
        columns: [...],
        dataSource: [
          {
            key: '0',
            field1: '',
            field2: '',
            field3: ''
          }
        ]
      }
    },
    methods: {
      handleAdd() {
        const newData = {
          key: `${this.dataSource.length}`,
          field1: '',
          field2: '',
          field3: ''
        };
        this.dataSource.push(newData);
      },
      handleUpdate(record, dataIndex, value) {
        const index = this.dataSource.findIndex(item => item.key === record.key);
        this.dataSource[index][dataIndex] = value;
      }
    }
  }
</script>

在这个例子中，我们添加了一个按钮来触发新增操作，并在按钮点击事件中向 dataSource 中添加了一行空白数据。注意，每行数据都必须有一个唯一的 key 属性，用于区分不同的数据行。

通过以上步骤，就可以实现 Ant Design Vue 的 Table 组件中的一列多个值可编辑可新增的功能。