vue2.0+Element UI 实现动态表单（点击按钮增删表格及嵌套输入框的增删）

动态实现表单的行增减删除，先看下效果如图，点击添加按钮行数下方会新增一行表格，点击删除会删除相应行的表格，表格行内嵌套了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>复制代码

 

值得注意的是：

新增行的时候要添加rowNum行数，  行数的增长就是this.dialogBindData.tbAssessItems.length+1,否则就会在删除的时候，删除不许确；