Vue中使用Element 表单点击按钮实现增行删行操作

本文已参与「新人创作礼」活动，- 起开启掘金创作之路。

在Vue中使用form表单点击增行删行操作

首先使用model绑定表单数据，使用v-for遍历snForm下的数组；

增行： 点击按钮新增一条sn进去

删行： 使用splice方法删除对应index的行

<el-form :model="snForm">
  <div v-for="(item, index) in snForm.productSnList" :key="index">
     <el-form-item label="产品SN" :prop="'productSnList.' + index + '.sn'">
         <el-input v-model="item.sn" autocomplete="off" clearable style="width: 200px" />
         <el-button type="danger" @click="deletSnRow">删除</el-button>
     </el-form-item>
  </div>
</el-form>

snForm: {
    productSnList: [
              { sn: '' }
             ]
},

// 增行按钮
addRow() {
   this.snForm.productSnList.push({
       sn: ''
   })
},
// 删行按钮
deletSnRow(index) {
    this.snForm.productSnList.splice(index, 1);
},