vue 动态添加表单,新增表格

vue 动态添加表单,新增表格_第1张图片
vue 动态添加表单,新增表格_第2张图片
当点击新增工作经历时,动态新增表单,并且可以点击删除当当前表单
新增的数据要以对象的形式push到数组里面去,我这里没有写校验规则会简单一些


          
        

data里面定义数据

      formData3: {
        powerAttrList: [
          {
            start_time: '',
            end_time: '',
            corp: '',
            position: '',
            contact: ''
          }
        ]
      },
      workForm: {
        start_time: '',
        end_time: '',
        corp: '',
        position: '',
        contact: ''
      },

methods里面定义方法

 // 增加工作经历
    addWork() {
      this.formData3.powerAttrList.push({
        start_time: '',
        end_time: '',
        corp: '',
        position: '',
        contact: ''
      })
    },
    // 删除属性列
    removeRow(index) {
      this.formData3.powerAttrList.splice(index, 1)
    },

你可能感兴趣的:(vue,element,vue.js,javascript,前端)