Ant Design Vue 的 Table
组件提供了可
编辑、可新增、可删除等功能，可以很方便地实现一
列多个
值的
表格。下面是实现步骤：
1. 在页面中引入 Table
组件并配置表头。在表头中定义需要展示的
列，例如：字段1、字段2、字段3。
```
<template>
<a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '字段1',
dataIndex: 'field1',
key: 'field1'
},
{
title: '字段2',
dataIndex: 'field2',
key: 'field2'
},
{
title: '字段3',
dataIndex: 'field3',
key: 'field3'
}
],
dataSource: []
}
}
}
</script>
```
2. 在 dataSource 中初始化一行空白数据，作为新增数据使用。
```
data() {
return {
columns: [...],
dataSource: [
{
key: '0',
field1: '',
field2: '',
field3: ''
}
]
}
}
```
3. 针对每一行数据，可以
添加一个
编辑按钮或者直接在单元格中
添加编辑功能，让用户可以对数据进行修改。这里我们采用在单元格中
添加编辑功能的方式，使用 Editable Cell 和 Editable Row
组件来实现。
```
<template>
<a-table :columns="columns" :data-source="dataSource" :components="components">
<template #body="tableProps">
<editable-row :record="tableProps.record" :index="tableProps.index">
<a-table-cell
v-for="column in columns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:record="tableProps.record"
:editable="column.editable"
@update="handleUpdate"
>
{{ tableProps.record[column.dataIndex] }}
</a-table-cell>
</editable-row>
</template>
</a-table>
</template>
<script>
import { EditableRow, EditableCell } from '
ant-
design-vue';
export default {
components: {
EditableRow,
EditableCell
},
data() {
return {
columns: [...],
dataSource: [
{
key: '0',
field1: '',
field2: '',
field3: ''
}
]
}
},
methods: {
handleUpdate(record, dataIndex, value) {
const index = this.dataSource.findIndex(item => item.key === record.key);
this.dataSource[index][dataIndex] = value;
}
}
}
</script>
```
在这个例子中，我们使用了 Editable Cell 和 Editable Row
组件来实现单元格和行的
编辑功能。其中，Editable Cell
组件用于渲染单元格内容，Editable Row
组件用于渲染整行数据。我们给每个需要
编辑的单元格
添加了 editable 属性以及 update 事件，当用户修改单元格内容时，会触发 update 事件，我们可以在这个事件中更新 dataSource 中对应的数据。
4. 当用户点击新增按钮时，可以在
表格中
添加一行空白行，并让用户输入新的数据。同时，也要提供一个保存按钮，让用户可以保存新增的数据。这里我们通过
添加一个按钮来实现新增功能，并在按钮点击事件中向 dataSource 中
添加一行空白数据。
```
<template>
<div>
<a-button type="primary" @click="handleAdd">新增</a-button>
<br /><br />
<a-table :columns="columns" :data-source="dataSource" :components="components">
<template #body="tableProps">
<editable-row :record="tableProps.record" :index="tableProps.index">
<a-table-cell
v-for="column in columns"
:key="column.dataIndex"
:dataIndex="column.dataIndex"
:record="tableProps.record"
:editable="column.editable"
@update="handleUpdate"
>
{{ tableProps.record[column.dataIndex] }}
</a-table-cell>
</editable-row>
</template>
</a-table>
</div>
</template>
<script>
import { EditableRow, EditableCell } from '
ant-
design-vue';
export default {
components: {
EditableRow,
EditableCell
},
data() {
return {
columns: [...],
dataSource: [
{
key: '0',
field1: '',
field2: '',
field3: ''
}
]
}
},
methods: {
handleAdd() {
const newData = {
key: `${this.dataSource.length}`,
field1: '',
field2: '',
field3: ''
};
this.dataSource.push(newData);
},
handleUpdate(record, dataIndex, value) {
const index = this.dataSource.findIndex(item => item.key === record.key);
this.dataSource[index][dataIndex] = value;
}
}
}
</script>
```
在这个例子中，我们
添加了一个按钮来触发新增操作，并在按钮点击事件中向 dataSource 中
添加了一行空白数据。注意，每行数据都必须有一个唯一的 key 属性，用于区分不同的数据行。
通过以上步骤，就可以实现
Ant Design Vue 的 Table
组件中的一
列多个
值可
编辑可新增的功能。
3252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
