一列显示三个值可编辑可新增
时间: 2024-03-17 22:41:13 浏览: 94
好的,你想要实现的是在一列中同时显示三个值,并且这三个值可以进行编辑和新增。下面是具体实现步骤:
1. 在columnsFeWater数组中,定义一个名为heJin_AI的对象,它的slots属性中分别定义了三个slot,如下所示:
```
{
title: 'heJin_AI',
dataIndex: 'heJin_AI',
key: 'heJin_AI',
slots: {
customRender: 'heJin_C, heJin_Mn, heJin_Si'
}
}
```
2. 在dataSourceFeWater数组中,定义一个名为heJin_AI的属性,并且它的值是一个对象,如下所示:
```
{
id: '1',
heJinName: '测试1',
heJin_AI: {
heJin_C: '2.0',
heJin_Si: '3.0',
heJin_Mn: '4.0'
},
// 其他属性...
}
```
3. 在template中定义三个slot分别对应heJin_C、heJin_Mn、heJin_Si,并且分别进行编辑和新增操作,如下所示:
```
<template slot="heJin_C" slot-scope="text, record, index">
<div>
<a-input
v-if="editableDataFeWater[record.id]"
placeholder="请输入"
v-model="editableDataFeWater[record.id]['heJin_AI']['heJin_C']"
@input="changeDataFeWater(record.id)"
/>
<template v-else>{{ record.heJin_AI.heJin_C }}</template>
</div>
</template>
<template slot="heJin_Mn" slot-scope="text, record, index">
<div>
<a-input
v-if="editableDataFeWater[record.id]"
placeholder="请输入"
v-model="editableDataFeWater[record.id]['heJin_AI']['heJin_Mn']"
@input="changeDataFeWater(record.id)"
/>
<template v-else>{{ record.heJin_AI.heJin_Mn }}</template>
</div>
</template>
<template slot="heJin_Si" slot-scope="text, record, index">
<div>
<a-input
v-if="editableDataFeWater[record.id]"
placeholder="请输入"
v-model="editableDataFeWater[record.id]['heJin_AI']['heJin_Si']"
@input="changeDataFeWater(record.id)"
/>
<template v-else>{{ record.heJin_AI.heJin_Si }}</template>
</div>
</template>
```
4. 在methods中定义changeDataFeWater方法,用于处理新增和编辑操作,如下所示:
```
changeDataFeWater(id) {
const data = this.editableDataFeWater[id]['heJin_AI'];
this.dataSourceFeWater = this.dataSourceFeWater.map(item => {
if (item.id === id) {
return {
...item,
heJin_AI: data
};
}
return item;
});
}
```
5. 在methods中还需要新增addItemFeWater方法,用于处理新增操作,如下所示:
```
addItemFeWater(id) {
const newData = {
id: uuidv4(),
heJinName: '',
heJin_AI: {
heJin_C: '',
heJin_Si: '',
heJin_Mn: ''
},
// 其他属性...
};
this.dataSourceFeWater = [...this.dataSourceFeWater, newData];
this.editableDataFeWater = {
...this.editableDataFeWater,
[newData.id]: { ...newData }
};
}
```
6. 现在你就可以在表格中看到一列显示三个值,并且这三个值可以进行编辑和新增了。
希望这些步骤能够帮助你实现你想要的功能。如果还有问题,请告诉我。
阅读全文