antdesign vue 表格单行可编辑

### Ant Design Vue 中实现表格单行可编辑功能 在 Ant Design Vue 中，可以通过组合 `a-table` 组件和其他输入组件来创建一个支持单行编辑的表格。为了使表格具备单行编辑能力，通常会利用 `editable` 属性以及事件处理函数如 `onChange`, `onBlur` 来捕获用户的修改动作。 下面是一个简单的例子展示如何构建这样的交互： #### 创建基础结构 定义好列配置时，在需要编辑的那一列加入自定义渲染器，并提供保存按钮用于提交更改后的数据。 ```vue <template> <a-table :columns="columns" :data-source="dataSource"> <!-- 自定义编辑单元格 --> <template #bodyCell="{ column, record }"> <div v-if="editingKey === record.key && (column.dataIndex === 'name' || column.dataIndex === 'age')"> <a-input v-model:value="record[column.dataIndex]" @pressEnter="save(record.key)" /> <check-outlined class="clickable-icon" @click="save(record.key)" /> <close-circle-outlined class="clickable-icon" @click="cancel" /> </div> <span v-else>{{ record[column.dataIndex] }}</span> </template> </a-table> </template> <script setup> import { ref } from 'vue'; // 导入图标库中的图标组件 import { CheckOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'; const columns = [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' } ]; let editingKey = ref(''); function edit(key) { editingKey.value = key; } function save(key) { editingKey.value = ''; } function cancel() { editingKey.value = ''; } const dataSource = ref([ { key: '0', name: 'Edward King 0', age: '32' }, ]); </script> ``` 此代码片段展示了基本框架，实际应用中可能还需要考虑更多细节，比如验证逻辑、错误提示等[^1]。 对于更复杂的场景或者想要进一步优化用户体验的情况，可以参考官方文档获取更多信息和支持[^2]。