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. 针对每一行数据，可以添加一个编辑按钮或者直接在单元格中添加编辑功能，让用户可以对数据进行修改。这里我们采用在单元格中添加编辑功能的方式，使用 Edi
table Cell 和 Edi
table Row
组件来实现。
```
<template>
<a-
table :columns="columns" :
data-source="
dataSource" :components="components">
<template #body="
tableProps">
<edi
table-row :record="
tableProps.record" :
index="
tableProps.
index">
<a-
table-cell
v-for="column in columns"
:key="column.
dataIndex"
:
dataIndex="column.
dataIndex"
:record="
tableProps.record"
:edi
table="column.edi
table"
@update="handleUpdate"
>
{{
tableProps.record[column.
dataIndex] }}
</a-
table-cell>
</edi
table-row>
</template>
</a-
table>
</template>
<script>
import { Edi
tableRow, Edi
tableCell } from '
ant-
design-vue';
export default {
components: {
Edi
tableRow,
Edi
tableCell
},
data() {
return {
columns: [...],
dataSource: [
{
key: '0',
field1: '',
field2: '',
field3: ''
}
]
}
},
methods: {
handleUpdate(record,
dataIndex, value) {
const
index = this.
dataSource.find
Index(item => item.key === record.key);
this.
dataSource[
index][
dataIndex] = value;
}
}
}
</script>
```
在这个例子中，我们使用了 Edi
table Cell 和 Edi
table Row
组件来实现单元格和行的编辑功能。其中，Edi
table Cell
组件用于渲染单元格内容，Edi
table Row
组件用于渲染整行数据。我们给每个需要编辑的单元格添加了 edi
table 属性以及 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">
<edi
table-row :record="
tableProps.record" :
index="
tableProps.
index">
<a-
table-cell
v-for="column in columns"
:key="column.
dataIndex"
:
dataIndex="column.
dataIndex"
:record="
tableProps.record"
:edi
table="column.edi
table"
@update="handleUpdate"
>
{{
tableProps.record[column.
dataIndex] }}
</a-
table-cell>
</edi
table-row>
</template>
</a-
table>
</div>
</template>
<script>
import { Edi
tableRow, Edi
tableCell } from '
ant-
design-vue';
export default {
components: {
Edi
tableRow,
Edi
tableCell
},
data() {
return {
columns: [...],
dataSource: [
{
key: '0',
field1: '',
field2: '',
field3: ''
}
]
}
},
methods: {
handleAdd() {
const new
Data = {
key: `${this.
dataSource.length}`,
field1: '',
field2: '',
field3: ''
};
this.
dataSource.push(new
Data);
},
handleUpdate(record,
dataIndex, value) {
const
index = this.
dataSource.find
Index(item => item.key === record.key);
this.
dataSource[
index][
dataIndex] = value;
}
}
}
</script>
```
在这个例子中，我们添加了一个按钮来触发新增操作，并在按钮点击事件中向
dataSource 中添加了一行空白数据。注意，每行数据都必须有一个唯一的 key 属性，用于区分不同的数据行。
通过以上步骤，就可以实现
Ant Design Vue 的
Table 组件中的一列
多个值可编辑可新增的功能。
扫一扫
1121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
