<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>
这个代码实例展示了如何使用Ant Design Vue的Table组件来实现全单元格编辑功能。通过为每个单元格插入输入组件，并监听它们的变更事件，我们可以实现对表格数据的实时编辑。这个例子中的输入组件包含了a-input和a-input-number，分别用于文本和数字的输入。在实际应用中，你可能需要根据数据类型来选择合适的输入组件。