vue中循环table表格数据，可编辑的列表（新增、删除、修改）

原文链接：https://blog.csdn.net/qq_24441205/article/details/126142669

1.如何循环如下图table表格数据(注：emerResponseDetail为整个列表定义的数据对象)

因"作业人员"为数组workPersonList，所以使用template 先循环该数组，再循环该数组里面的字段

<table>
<tr><th>姓名</th><th>抢修队</th><th>操作<el-button icon="el-icon-plus" class="greenbg fr" type="mini" @click="addWorkPerson" :disabled="isDisabled"></el-button></th></tr>
<template v-for="(item1,index) in emerResponseDetail.workPersonList">
<template v-if="index == 'rows'" v-for="item2 in item1">
<tr><td>{{item2.userName}}</td><td>{{item2.teamName}}</td></tr>
</template>
</template>
</table>
1
2
3
4
5
6
7
8
2.怎么让table表格中获取到的数据可编辑、新增、删除

1）把获取到的数据{{item2.userName}}改成input输入框或select下拉框，并进行双向数据绑定

//到达现场时间、抢修队到达用时可编辑的写法
<tr>
<td>到达现场时间</td>
<td>
<el-date-picker
:disabled="isDisabled"
v-model="emerResponseDetail.teamFirstArriveTime"
type="datetime"
placeholder="选择日期时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="12:00:00">
</el-date-picker>
</td>
<td>抢修队到达用时(分)</td><td><el-input clearable :disabled="isDisabled" v-model="emerResponseDetail.teamArriveUseTime" style="width: auto;"></el-input></td>
</tr>
//作业人员table列表
<table>
<tr><th>姓名</th><th>抢修队</th><th>操作<el-button icon="el-icon-plus" class="greenbg fr" type="mini" @click="addWorkPerson" :disabled="isDisabled"></el-button></th></tr>
<template v-for="(item1,index) in emerResponseDetail.workPersonList">
<template v-if="index == 'rows'" v-for="item2 in item1">
<!--<tr><td>{{item2.userName}}</td><td>{{item2.teamName}}</td></tr>-->
<tr>
<td><el-input clearable :disabled="isDisabled" v-model="item2.userName" style="width: auto;"></el-input></td>
<td>
<el-select v-model="item2.teamId" clearable placeholder="" style="width: 100%;" :disabled="isDisabled">
<el-option
v-for="item in contingencyTeam"
:key="item.teamId"
:label="item.teamName"
:value="item.teamId">
</el-option>
</el-select>
</td>
<td>
<el-button type="text" size="small" @click="delUserName(item2)" :disabled="isDisabled" class="orange">删除</el-button>
</td>
</tr>
</template>
</template>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2.新增、删除方法

//新增作业人员
addWorkPerson(){
//为新增作业人员定义一个addWorkPersonForm 对象进行数据保存，并追加到列表emerResponseDetail里的workPersonList数组中
let addWorkPersonForm = {
userName:'',
teamId:'',
teamName:''
};
this.emerResponseDetail.workPersonList.rows.push(addWorkPersonForm)
},
//删除作业人员
delUserName(item){
var index = this.emerResponseDetail.workPersonList.rows.indexOf(item)
if (index !== -1) {
this.emerResponseDetail.workPersonList.rows.splice(index, 1)
}
},
//确定按钮
saveUpdate(){
enterButton(this.emerResponseDetail).then(res =>{
this.getEmergencyResponseList()
this.$message.success("修改成功！")
})
this.isShowDialog = false
this.isDisabled= true;
this.isBtnShow = false;
},