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,否則就會在刪除的時候，刪除不許確；