ant desgin vue 点击单元格直接编辑数据

在 ant design vue 中，你可以使用 <a-table-editable-cell> 组件来实现单元格直接编辑数据的功能。该组件可以被包含在 <a-table> 组件的 <a-table-column> 中，并且需要设置 dataIndex 属性以确定该单元格对应的数据字段。当用户双击单元格时，该组件会自动切换到编辑模式，用户可以在单元格内直接编辑数据，编辑完成后点击回车或者失焦时，该组件会自动保存数据并切换回非编辑模式。以下是一个示例代码：

<template>
  <a-table :data-source="dataSource">
    <a-table-column title="姓名" dataIndex="name">
      <template slot="customRender" slot-scope="{text, record}">
        <a-table-editable-cell :value="text" :record="record" dataIndex="name" @save="onCellSave"></a-table-editable-cell>
      </template>
    </a-table-column>
    <a-table-column title="年龄" dataIndex="age">
      <template slot="customRender" slot-scope="{text, record}">
        <a-table-editable-cell :value="text" :record="record" dataIndex="age" @save="onCellSave"></a-table-editable-cell>
      </template>
    </a-table-column>
  </a-table>
</template>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { name: '张三', age: 18 },
          { name: '李四', age: 20 },
          { name: '王五', age: 22 },
        ]
      }
    },
    methods: {
      onCellSave(record, dataIndex, value) {
        record[dataIndex] = value;
      }
    }
  }
</script>

在上述代码中，我们使用了 <a-table-editable-cell> 组件来包装姓名和年龄两个单元格，并且通过设置 dataIndex 属性来确定数据字段。在 onCellSave 方法中，我们可以通过修改 record 对象的属性来更新数据。