要实现表格的可编辑行功能，可以使用 `Table` 组件提供的 `editable` 属性和 `customRow` 插槽。具体实现步骤如下：
1. 在 `Table` 组件上添加 `editable` 属性，将其设置为 `true`，开启可编辑行功能。
```html
<template>
<a-table :columns="columns" :data-source="data" row-key="id" :editable="true">
<!-- ... -->
</a-table>
</template>
```
2. 在 `columns` 中为需要编辑的列添加 `customRender` 属性，并将其设置为一个函数。在该函数中，返回一个包含可编辑行和非可编辑行的 `template`，并根据 `record.editable` 属性的值来判断显示哪个 `template`。
```js
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'name',
editable: true, // 需要编辑的列
customRender: (text, record) => {
if (record.editable) { // 可编辑状态
return (
<a-input v-model={record.name} />
);
} else { // 非可编辑状态
return text;
}
},
},
// ...
],
// ...
}
},
```
3. 在 `customRow` 插槽中为每一行添加编辑按钮，并通过 `record.editable` 属性的值来判断当前行是否可编辑。同时，在点击编辑按钮时将 `record.editable` 属性设置为 `true`，并将编辑按钮替换为保存和
取消按钮。在点击保存或
取消按钮时，将 `record.editable` 属性重新设置为 `false`，并根据需要保存或恢复数据。
```html
<template>
<a-table :columns="columns" :data-source="data" row-key="id" :editable="true">
<template #customRow="record, index">
<tr>
<!-- 其他列 -->
<td>
<a-icon
type="edit"
v-if="!record.editable"
@click="editRow(record)"
/>
<a-button-group v-else>
<a-button type="primary" @click="saveRow(record)">保存</a-button>
<a-button @click="cancelEdit(record)">
取消</a-button>
</a-button-group>
</td>
</tr>
</template>
</a-table>
</template>
```
完整代码如下：
```html
<template>
<a-table :columns="columns" :data-source="data" row-key="id" :editable="true">
<template #customRow="record, index">
<tr>
<td>{record.name}</td>
<td>{record.age}</td>
<td>{record.address}</td>
<td>
<a-icon
type="edit"
v-if="!record.editable"
@click="editRow(record)"
/>
<a-button-group v-else>
<a-button type="primary" @click="saveRow(record)">保存</a-button>
<a-button @click="cancelEdit(record)">
取消</a-button>
</a-button-group>
</td>
</tr>
</template>
</a-table>
</template>
<
script>
export default {
data() {
return {
data: [
{
id: 1,
name: '张三',
age: 18,
address: '北京市朝阳区',
editable: false,
},
{
id: 2,
name: '李四',
age: 20,
address: '上海市浦东新区',
editable: false,
},
],
columns: [
{
title: '姓名',
dataIndex: 'name',
editable: true,
customRender: (text, record) => {
if (record.editable) {
return (
<a-input v-model={record.name} />
);
} else {
return text;
}
},
},
{
title: '年龄',
dataIndex: 'age',
editable: true,
customRender: (text, record) => {
if (record.editable) {
return (
<a-input-number v-model={record.age} />
);
} else {
return text;
}
},
},
{
title: '地址',
dataIndex: 'address',
editable: true,
customRender: (text, record) => {
if (record.editable) {
return (
<a-input v-model={record.address} />
);
} else {
return text;
}
},
},
{
title: '操作',
dataIndex: 'operation',
},
],
};
},
methods: {
editRow(record) {
record.editable = true;
},
saveRow(record) {
record.editable = false;
// TODO: 保存修改之后的数据
},
cancelEdit(record) {
record.editable = false;
// TODO: 恢复到修改之前的数据
},
},
};
</
script>
```
在保存或恢复数据的方法中，可以调用后端接口来实现数据的持久化保存。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
