ant design vue表格一键编辑

Ant Design Vue 表格组件提供了一种简单的方式来实现一键编辑。你可以使用 `editable` 属性来启用该功能，并通过 `edit-config` 属性来配置编辑行为。

下面是一个简单的例子：

<template>
  <a-table :columns="columns" :data-source="data" :row-key="record => record.id" :editable="editable" :edit-config="editConfig">
    <template #name="text" v-if="!editable">{{ text }}</template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      editable: true,
      editConfig: {
        trigger: 'click',
        mode: 'cell',
      },
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
          editable: true,
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          editable: true,
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
          editable: true,
        },
      ],
      data: [
        {
          id: '1',
          name: '张三',
          age: 18,
          address: '北京市',
        },
        {
          id: '2',
          name: '李四',
          age: 20,
          address: '上海市',
        },
      ],
    };
  },
};
</script>

在上面的例子中，我们将 `editable` 属性设置为 `true`，并通过 `edit-config` 属性来配置编辑行为。具体来说，我们使用 `trigger` 属性来指定触发编辑的事件，这里我们使用了 `click` 事件；使用 `mode` 属性来指定编辑模式，这里我们使用了 `cell` 模式，表示单元格编辑。同时，我们还在列定义中将 `editable` 属性设置为 `true`，表示该列可编辑。

最后，我们使用了一个插槽来自定义单元格的渲染，当表格不可编辑时直接显示文本。