动态实现表单的行增减删除，先看下效果
如图，点击添加按钮行数下方会新增一行表格，点击删除会删除相应行的表格，表格行内嵌套了input输入框
最近刚写了这个项目，所以我们一切以后端请求接口返回数据为例
代码实现
我们这个功能是点击跳出的弹框
<div class="table-wrapper">
<div class="button" style="float: right;margin-bottom: 10px;">
<el-button style="margin-right: 10px;" class="el-icon-plus" @click.prevent="addRow()" />
<el-button style="margin-right: 10px;" class="el-icon-minus" @click.prevent="delData()" />
</div>
<div class="table">
<el-table ref="table" :data="dialogBindData.tbAssessItems" tooltip-effect="dark" border stripe @selection-change="selectRow">
<el-table-column type="selection" width="40" align="center" />
<el-table-column label="SN" type="index" width="40" align="center" />
<el-table-column label="评估项名称" width="300" prop="itemName" align="center">
<template slot-scope="scope">
<el-input placeholder="请输入评估项名称" v-model="scope.row.itemName" class="itemName" />
</template>
</el-table-column>
<el-table-column label="分值及分值选项">
<template slot-scope="scope">
<span v-for="(item,index) in dialogBindData.tbAssessItems[scope.$index].tbAssessDetails" :key="index">
<span class="spn">选项</span>
<el-input placeholder="请输入选项" v-model="item.detailInstructions" style="width: 30%" class="detailInstructions" />
<span class="spn">分值</span>
<el-input placeholder="请输入分值" v-model="item.score" style="width: 18%;margin-bottom: 10px;" class="score" />
<span class="spn" @click="addinput(scope.$index,index)">+</span> <span @click="del(scope.$index,index)">-</span>
<br>
</span>
</template>
</el-table-column>
<el-table-column label="说明" width="200">
<template slot-scope="scope">
<el-input placeholder="请输入说明" v-model="scope.row.itemInstructions" type="textarea" class="itemInstructions" />
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="btns-wrapper">
<el-button icon="el-icon-circle-close" @click="handleClose">取 消</el-button>
<el-button icon="el-icon-circle-check" :loading="buttonState" type="primary" @click="submitForm">保 存</el-button>
</div>
</el-form>
</el-dialog>
增加删除行的方法
<script>
export default {
data() {
return {
dialogBindData: {
tbAssessItems:[],
tbAssessLevels:{
assessFormId:""
}
}，
selectlistRow: [],
rowNum: 1,
}
},
methods: {
// 增加行
addRow() {
var tablelist = {
rowNum: this.dialogBindData.tbAssessItems.length+1,
tbAssessDetails: [
{
score: '',
detailInstructions: ''
},
{
score: '',
detailInstructions: ''
}
],
itemName: '',
itemInstructions: ''
}
this.dialogBindData.tbAssessItems.push(tablelist)
},
// 删除方法
// 删除选中行
delData() {
if(this.dialogBindData.tbAssessItems.length <=1){
console.log("不允许删除")
}else{
for (let i = 0; i < this.selectlistRow.length; i++) {
const val = this.selectlistRow
// 获取选中行的索引的方法
// 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
// rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
val.forEach((val, index) => {
this.dialogBindData.tbAssessItems.forEach((v, i) => {
if (val.rowNum === v.rowNum) {
// i 为选中的索引
this.dialogBindData.tbAssessItems.splice(i, 1)
}
})
})
}
// 删除完数据之后清除勾选框
this.$refs.table.clearSelection()
}
},
// 增加分值及分值说明
addinput(index, inputIndex) {
const cope = {
score: '',
detailInstructions: ''
}
this.dialogBindData.tbAssessItems[index].tbAssessDetails.push(cope)
},
del(index,inputIndex) {
// console.log(inputIndex)
if( this.dialogBindData.tbAssessItems[index].tbAssessDetails.length <=2){
console.log("不允许删除")
}else{
this.dialogBindData.tbAssessItems[index].tbAssessDetails.splice(inputIndex, 1)
}
},
},
}
</script>
