动态表单+VUE+elementUI

动态表单处理
使用的elementUI的组件库，主要是用vue写的，写了一个示例：
有车主姓名 手机号 车牌号 可以动态添加车车牌号
如果初始化没有数据，formDate没有数据的情况，不允许修改 ，点击按钮 初始化示例：

示例

视图页面代码

 <div class="form-number">
  <el-form-item
    v-for="(item, index) in formDate.carNoList"
    :label="'车牌号'"
    :key="index"
    :prop="'carNoList.'+index"
    :rules="[
      { required: true, message: '请输入车牌号', trigger: 'blur' }
    ]"
    >
      <div class="form-bt">
    <el-input v-model="formDate.carNoList[index] "></el-input>
      <el-button type="primary" v-if="index === 0" @click="addDomain">增加</el-button>
    <el-button type="danger" v-else @click.prevent="removeDomain(item)">删除</el-button>
      </div>
    </el-form-item>
  </div>

数据

 formDate: {
          carNoList: [],
          userName: '', //  车主名
          phone: '',  //手机号
          parkingId: '' //停车信息id
        }

功能代码

// 删除 增加 
 removeDomain(item) {
        var index = this.formDate.carNoList.indexOf(item)
        if (index !== -1) {
          this.formDate.carNoList.splice(index, 1)
        }
      },
      addDomain() {
        this.formDate.carNoList.push('')
      }

数据接口处理

//  获取初始化信息
 getList(val) {
      if (val) {
        http.plateList(val).then((res) => {
          this.formDate = { ...res.data, parkingId: val }
          console.log('wwwww', this.formDate)
        })
      }
    },
     submitForm(formName) {
    // console.log('立即提交')
        this.$refs[formName].validate((valid) => {
           console.log(valid)
          if (valid) {
            this.saveNumber()
            console.log(valid)
          } else {
            console.log('error submit!!')
            return false
          }
        })
       },
       // 调用保存接口方法
          saveNumber() {
       // console.log('接口', this.formDate.parkingId)
         let data = {
          telPhone: this.formDate.phone,
         userName: this.formDate.userName,
         carNoList: this.formDate.carNoList,
         parkingId: this.formDate.parkingId
      }
      console.log(data, 'data')
       http.saveParkingCarNo(data).then((res) => {
 if (res.code === 0) {
   console.log(res)
   this.$message({
            message: '修改成功',
            type: 'success'
          })
 } else {
     this.$message.error('新增失败')
 }
        })
            console.log('dd', this.formDate)
      },