期望目标：实现一个能通过按钮来动态增加表格栏，每次能添加一行，每行末尾有一个删减按钮。
<el-button type="text" class="primary"
@click="addMember()">+添加</el-button>
<el-table
:data="memberList"
style="width: 100%"
:header-cell-style="{
background: '#fafafa',
color: '#aaa',
fontSize: '15px',
}"
>
<el-table-column prop="index" label="序号" width="60">
<template slot-scope="scope">
<span>{{ getMemberIndex(scope.$index) }}</span>
</template>
</el-table-column>
<el-table-column prop="facilityName" label="设施名称">
<template slot-scope="scope">
<el-select v-model="scope.row.facilityName" placeholder="请选择名称" clearable>
<el-option v-for="dict in dict.type.data_facilities_name" :label="dict.label" :value="dict.value" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="facilitySpecificType" label="具体类型">
<template slot-scope="scope">
<el-select v-model="scope.row.facilitySpecificType" placeholder="请选择类型" clearable>
<el-option v-for="dict in dict.type.data_facilities_type" :label="dict.label" :value="dict.value"/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="facilityLocation" label="设施位置">
<template slot-scope="scope">
<el-select v-model="scope.row.facilityLocation" placeholder="请选择位置" clearable>
<el-option v-for="dict in dict.type.data_equipment_location" :label="dict.label" :value="dict.value"/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="facilityTp" label="规格">
<template slot-scope="scope">
<el-input v-model="scope.row.facilityTp"></el-input>
</template>
</el-table-column>
<el-table-column prop="accountabilityUnit" label="责任单位">
<template slot-scope="scope">
<el-input v-model="scope.row.accountabilityUnit"></el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.$index,'memberList')"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
// 添加杆件数据按钮
addMember() {
var member = {
index: this.dataId++,
facilityNo: '',
facilityName: '',
facilitySpecificType: '',
facilityLocation: '',
facilityTp: '',
accountabilityUnit: '',
};
this.memberList.push(member);
},效果：
遇到的问题一：在删减时，当前所有行的序号需要自动删减，重新计算变更序号
// 删除行数据后序号自动连贯更新
getMemberIndex(index) {
return this.memberList.slice(0, index + 1).length ;
},
/** 删除按钮操作 */
handleDelete(index, listName) {
if (index !== -1 && listName =="memberList") {
this.memberList.splice(index, 1)
}
},给序号那一栏字段单独重设，动态变更index，<span>{{ getMemberIndex(scope.$index) }}</span>，每次删除一行，调用handleDelete函数，再用getMember重新计算一遍所有序号
如果有数据验证的需求，就需要在table外面再嵌套一层form，因为只有el-form表单猜有数据验证的功能。
<el-form :model="memberForm" :rules="rules" ref="memberForm"></el-form>
问题二：
多个表单同时用一个接口提交，在提交数据表单时，后端要求有特殊的数据结构，需要将获取到的多个表单数据重新按要求整合。新设立一个json字段存储
/** 提交按钮 */
async submitForms() {
// 构建数据结构
const facilitiesData = {
pointId: this.pointForm.pointId,
pointName: this.pointForm.pointName,
memberList: this.memberList.map(member => ({
facilityName: member.facilityName,
facilitySpecificType: member.facilitySpecificType,
facilityLocation: member.facilityLocation,
facilityTp: member.facilityTp,
accountabilityUnit: member.accountabilityUnit,
})),
}
// 发送请求添加设施
await addFacilities(facilitiesData).then(response => {
this.$modal.msgSuccess("新增成功");
this.goBack();
})
},
