Ant Design Vue Table组件全单元格编辑实现方案

<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    :editable="true"
    @change="handleChange"
  >
    <template slot="name" slot-scope="name">
      <a-input v-model="name" @change="handleFieldChange" />
    </template>
    <template slot="age" slot-scope="age">
      <a-input-number v-model="age" @change="handleFieldChange" />
    </template>
    <template slot="address" slot-scope="address">
      <a-input v-model="address" @change="handleFieldChange" />
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'name',
          dataIndex: 'name',
          key: 'name',
          width: 120,
        },
        {
          title: 'age',
          dataIndex: 'age',
          key: 'age',
          width: 120,
        },
        {
          title: 'address',
          dataIndex: 'address',
          key: 'address',
          width: 200,
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        // ...
      ],
    };
  },
  methods: {
    handleChange() {
      // 处理整行数据变更
    },
    handleFieldChange(e) {
      const { target } = e;
      // 处理单个字段变更
    },
  },
};
</script>