vue + element 实现动态表单

对于动态增减表单项，Element UI 官方文档表单那一节已经介绍得很清楚了，我之前没有看见，绕了很多弯路，这里针对点击按钮增删一排输入框的问题做一个总结。

效果图如下

存在一排必填的姓名与手机号，点击增加后会新增一行，点击每行后面的删除图标则会删除该行

必填项很简单，就是普通表单：

 

    
    
        
        
    
    
        
        
    

增加

 

export default {
  name: 'dynamicForm',
  data () {
    return {
      form: {
        name: '',
        phone: ''
      },
      formRules: {
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
        ]
      }
    }
  }
}

 

动态表单部分：

 

 

在data 的 form 里增加 dynamicItem

form: {
        name: '',
        phone: '',
        dynamicItem: []
}

在methods里增加方法

 

methods: {
    addItem () {
      this.form.dynamicItem.push({
        name: '',
        phone: ''
      })
    },
    deleteItem (item, index) {
      this.form.dynamicItem.splice(index, 1)
    }
}

 

每次点击增加按钮，会在dynamicItem里增加新的项，反映到页面上就是新增了一排输入框；而点击删除的时候，则通过index找到当前行删掉。