vue动态增加减少输入行

首先看效果图

点击添加按钮，将新增一行，点击删除按钮将减少一行，如图：

上述可通过表单嵌套表格的方式实现

1、实现代码如下：

<template>
<el-button @click="addLine" type="primary">添加</el-button>
  <el-form :rules="formData.rules" :model="formData" ref="formDom">
  <el-table
   :data="formData.tableData"
   style="width: 100%">
   <el-table-column prop="usernames" label="用户名">
    <template slot-scope="scope">
    <el-form-item :prop="'tableData.' + scope.$index + '.usernames'" :rules='formData.rules.usernames'>
     <el-input v-model="scope.row.usernames" placeholder="用户名" ></el-input>
    </el-form-item>
    </template>
   </el-table-column>
   <el-table-column prop="passwds" label="密码">
    <template slot-scope="scope">
     <el-form-item :prop="'tableData.' + scope.$index + '.passwds'" :rules="formData.rules.passwds">
     <el-input v-model.number="scope.row.bookvolume" placeholder="密码"></el-input>
     </el-form-item>
    </template>
   </el-table-column>
   <el-table-column label="操作">
    <template slot-scope="scope">
    <el-form-item>
    <el-button
    size="small"
     type="danger"
     v-if="!scope.row.editing"
     icon="el-icon-delete"
     @click="handleDelete(scope.$index, scope.row)">删除
    </el-button>
    </el-form-item>
    </template>
   </el-table-column>
  </el-table>
  </el-form>
</template>

说明：上面中scpoe.$index表示表格当前行的索引，从0开始,scope.row表示表格当前行数据

2、配置验证规则以及初始数据，如下：

formData: {
     rules: {
     usernames: {
       type: 'string',
       required: true,
       message: '请输入用户名',
       trigger: 'blur'
       },
     passwds: {
        type: 'string',
        required: true,
        message: '请输入密码',
        trigger: 'blur'
       }
     },
     tableData: [{
     usernames: '',
     passwds: '',
     }]
    },

注：上面的初始数据默认为空

3、配置添加与删除函数，如下：

   addLine() {
   var newValue = {
     usernames: '',
     passwds: '',
    }
   this.formData.tableData.push(newValue)
   },
   handleDelete(index) {
   this.formData.tableData.splice(index, 1)
   }

完整代码参考如下：

<template>
<div>
  <el-button @click="addLine" type="primary">添加</el-button>
  <el-form :rules="formData.rules" :model="formData" ref="formDom">
  <el-table
   :data="formData.tableData"
   style="width: 100%">
   <el-table-column prop="usernames" label="用户名">
    <template slot-scope="scope">
    <el-form-item :prop="'tableData.' + scope.$index + '.usernames'" :rules='formData.rules.usernames'>
     <el-input v-model="scope.row.usernames" placeholder="用户名" ></el-input>
    </el-form-item>
    </template>
   </el-table-column>
   <el-table-column prop="passwds" label="密码">
    <template slot-scope="scope">
     <el-form-item :prop="'tableData.' + scope.$index + '.passwds'" :rules="formData.rules.passwds">
     <el-input v-model.number="scope.row.bookvolume" placeholder="密码"></el-input>
     </el-form-item>
    </template>
   </el-table-column>
   <el-table-column label="操作">
    <template slot-scope="scope">
    <el-form-item>
    <el-button
    size="small"
     type="danger"
     v-if="!scope.row.editing"
     icon="el-icon-delete"
     @click="handleDelete(scope.$index, scope.row)">删除
    </el-button>
    </el-form-item>
    </template>
   </el-table-column>
  </el-table>
  </el-form>
  <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="passadd">确 定</el-button>
  </span>
</div>
</template>
<script>
 export default {
    data() {
      return {
	formData: {
          rules: {
          usernames: {
            type: 'string',
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
            },
          passwds: {
             type: 'string',
             required: true,
             message: '请输入密码',
             trigger: 'blur'
            }
          },
          tableData: []
       }
     }
},
methods: {
   passcancel() {
      this.dialogTableVisible = false
   },
   addLine() {
   var newValue = {
     usernames: '',
     passwds: ''
    }
   this.formData.tableData.push(newValue)
   },
   handleDelete(index) {
   this.formData.tableData.splice(index, 1)
   }
 }
}
</script>