动态实现表单的行增减删除，先看下效果
如图，点击添加按钮行数下方会新增一行表格，点击删除会删除相应行的表格，表格行内嵌套了input输入框
最近刚写了这个项目，所以我们一切以后端请求接口返回数据为例
代码实现
我们这个功能是点击跳出的弹框
选项
分值
+ -
取 消
保 存
复制代码
增加删除行的方法
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
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)
}
},
},
}
复制代码
值得注意的是：
新增行的时候要添加rowNum行数，
行数的增加就是this.dialogBindData.tbAssessItems.length+1,不然就会在删除的时候，删除不准确；
9262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
