记一次vue+elementUI页面添加动态表单

首先，页面是这样的

当点击增加明细时，页面会新添加红色框中的内容。同时，会带有一个删除的按钮。

上图为点击增加明细后的效果图。

页面代码:

<template>
  <div>
    <el-dialog
      :title = "title"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <div>
        <el-form :model="inputForm" ref="inputForm" v-loading="loading"
                 label-width="120px">
          <el-col>
            <el-form-item label="审批名称" prop="name"
                          :rules="[
                      {required: true, message:'审批名称不能为空', trigger:'blur'}
                     ]">
              <el-input v-model="inputForm.name" placeholder="请输入审批名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="审批说明" prop="explains"
                          :rules="[
                     ]">
              <el-input type="textarea" v-model="inputForm.explains" placeholder="审批说明"     ></el-input>
            </el-form-item>
          </el-col>

          <div style="padding-top: 10px;padding-bottom: 20px;padding-left: 100px;font-size: 20px;">
            明细
          </div>

          <div v-for="(item, index) in inputForm.detailsList" :key="index">
              <el-col>
                <el-form-item label="物资名称"
                              :rules="[
                                      {required: true, message:'物资名称不能为空', trigger:'blur'}
                             ]">
                  <el-select v-model="item.material.id" placeholder="请选择物资名称"  style="width: 100%;" >
                    <el-option
                      v-for="x in materialData"
                      :key="x.id"
                      :label="x.name"
                      :value="x.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="申请数量" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                  :rules="[
                                    {required: true, message:'申请数量不能为空', trigger:'blur'}
                  ]">
                  <el-input v-model="item.material.quantityDrugs" placeholder="请填写物资数量"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="源仓库"
                              :rules="[
                              ]">
                  <el-select v-model="item.source.id" placeholder="请选择希望申请的仓库"  style="width: 100%;">
                    <el-option
                      v-for="x in sourceData"
                      :key="x.id"
                      :label="x.name"
                      :value="x.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="目标仓库"
                              :rules="[
                              ]">
                  <el-select v-model="item.target.id" placeholder="请选择希望进入的仓库"  style="width: 100%;">
                    <el-option
                      v-for="x in targetData"
                      :key="x.id"
                      :label="x.name"
                      :value="x.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            <i class="el-icon-delete" v-if="inputForm.detailsList.length > 1" @click="deleteItem(item, index)" style="padding-left: 40px"></i>
          </div>
        </el-form>
      </div>
      <el-button @click="addItem" type="primary">增加明细</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary"  @click="doSubmit()" v-noMoreClick>确定		     </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        visible: false,
        inputForm: {
          id: '',
          name: '',
          explains: '',
          detailsList: [
            {
              source: {
                id: '',
                name: ''
              },
              target: {
                id: '',
                name: ''
              },
              material: {
                id: '',
                name: '',
                quantityDrugs: ''
              }
            }
          ]
        },
        sourceData: [],
        targetData: [],
        materialData: [],
        loading: false
      }
    },

    methods: {
      init () {
        debugger
        this.title = '发起申请'
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.getSourceData()
          this.getTargetData()
          this.getMaterialFromMaster()
        })
      },
      change (e) {
        this.$forceUpdate()
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            let tag = true
            this.inputForm.detailsList.some(item => {
              if (item.material.id === '') {
                tag = false
                this.$message({
                  message: '物资名称不能为空,请填写',
                  type: 'warning'
                })
                return true
              }
              if (item.material.quantityDrugs === '') {
                tag = false
                this.$message({
                  message: '数量不能为空',
                  type: 'warning'
                })
                return true
              }
              if (item.source.id === '') {
                tag = false
                this.$message({
                  message: '源仓库不能为空',
                  type: 'warning'
                })
                return true
              }
              if (item.target.id === '') {
                tag = false
                this.$message({
                  message: '目标仓库不能为空',
                  type: 'warning'
                })
                return true
              }
            })
            if (tag) {
              console.log(this.form)
              this.$http({
                url: '/applicationRecord/application/insert',
                method: 'post',
                data: this.inputForm
              }).then(({data}) => {
                if (data && data.success) {
                  this.visible = false
                  this.$message.success(data.msg)
                  if (callback != null) {
                    callback('tb_material_application', this.businessId)
                  }
                }
              })
            }
          }
        })
      },
      addItem () {
        this.getSourceData()
        this.getTargetData()
        this.getMaterialFromMaster()
        this.inputForm.detailsList.push({
          source: {
            id: ''
          },
          target: {
            id: ''
          },
          material: {
            id: '',
            quantityDrugs: ''
          },
          sourceData: this.sourceData,
          targetData: this.targetData,
          materialData: this.materialData
        })
      },
      // 获取源仓库的数据
      getSourceData () {
        this.loading = true
        this.$http({
          url: '/warehouse/wareHouse/getSouTarWareHouse',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.sourceData = data.data
            this.loading = false
          }
        })
      },
      // 获取目标仓库的数据
      getTargetData () {
        this.loading = true
        this.$http({
          url: '/warehouse/wareHouse/getSouTarWareHouse',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.targetData = data.data
            this.loading = false
          }
        })
      },
      // 获取主仓库所有物资
      getMaterialFromMaster () {
        this.loading = true
        this.$http({
          url: '/warehouse/wareHouse/getMaterialFromMaster',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.materialData = data.data
            this.loading = false
          }
        })
      },
      deleteItem (item, index) {
        this.inputForm.detailsList.splice(index, 1)
      }
    }
  }
</script>

当时出现了一个bug，就是页面渲染出来了，但是select和input没法选择和输入，后来发现是因为把”删除“的< li > 标签放到了< el-form-item >里。

还有个特搞笑的事，没发现原因：
页面上有个"明细"的 < div > ,但是在找上面的这个bug时，我们把一个
< el-form-item > 从循环中拿出来放到了< div > 上面，此时select,input可以选择和输入；放到下面，则不可以。

想知道的，可以探究下。