用ant design vue中的table实现一列中有三个值可编辑可新增
时间: 2023-12-26 13:06:04 浏览: 102
vue el-table实现行内编辑功能
4星 · 用户满意度95%
好的,以下是使用 Ant Design Vue 中的 Table 组件实现一列中有三个值可编辑可新增的代码示例:
```vue
<template>
<a-table :columns="columns" :dataSource="dataSource" :rowKey="record.id">
<template #name="record" #index="index">
<a-form-item>
<a-input-number
:value="record.a"
:min="0"
@change="handleFieldChange(index, 'a', $event)"
/>
</a-form-item>
<a-form-item>
<a-input-number
:value="record.b"
:min="0"
@change="handleFieldChange(index, 'b', $event)"
/>
</a-form-item>
<a-form-item>
<a-input-number
:value="record.c"
:min="0"
@change="handleFieldChange(index, 'c', $event)"
/>
</a-form-item>
</template>
</a-table>
</template>
<script>
import { ref } from 'vue';
import { Table, InputNumber, Form, FormItem } from 'ant-design-vue';
export default {
components: {
Table,
InputNumber,
Form,
FormItem,
},
setup() {
const dataSource = ref([
{
id: 1,
a: 1,
b: 2,
c: 3,
},
{
id: 2,
a: 4,
b: 5,
c: 6,
},
]);
const columns = [
{
title: 'A',
dataIndex: 'a',
editable: true,
},
{
title: 'B',
dataIndex: 'b',
editable: true,
},
{
title: 'C',
dataIndex: 'c',
editable: true,
},
];
const handleFieldChange = (index, field, value) => {
const newData = [...dataSource.value];
newData[index][field] = value;
dataSource.value = newData;
};
return {
dataSource,
columns,
handleFieldChange,
};
},
};
</script>
```
在上述代码中,我们使用了 Ant Design Vue 中的 Table 组件来展示数据,同时将每一列的可编辑属性设置为 true,以实现单元格编辑功能。在模板中,我们使用了插槽来自定义每行数据的展示方式,通过 a-form-item 和 a-input-number 组件来实现单元格的编辑及新增功能。在 setup 方法中,我们使用了 ref 来声明了一个名为 dataSource 的响应式变量,并初始化了两条数据;同时声明了一个名为 columns 的变量,用于配置表格的列信息;最后声明了一个名为 handleFieldChange 的方法,用于处理单元格的值变化事件。
阅读全文