使用Elementui元素动态增减表单组件

秒速五厘米 2022-09-05 12:52 144阅读 0赞

需求：动态增减表单组件

## 动态表单组件 ##

**模板部分**

<el-form :rules="dynamicRules" ref="dynamicForm" label-width="140px" class="demo-dynamic" :inline="true" v-for="(item,index) in dynamicInfo" :key="index" :model="item" >
       <el-form-item  v-if="dynamicInfo.length > 1"  class="removebutton">
         <el-button size="small" type="danger" @click.prevent="remove(item, index)">移除</el-button>
       </el-form-item>
       <el-form-item prop="name" label="名称">
         <el-input maxlength="32" v-model="item.name" placeholder=""></el-input>
       </el-form-item>
       <el-form-item label="类别" prop="type">
         <el-select placeholder="请选择" v-model="item.type" size="small" clearable>
           <el-option v-for="(item, index) in types" :key="index" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-form-item>
     </el-form>

**JS部分**

export default { 
      props: { 
        value: Array
      },
      data() { 
        return { 
          dynamicInfo: [{ 
            name: '',
            type: ''
          }],
          dynamicRules: { 
            name: [{  required: true, message: '请输入名称', trigger: 'blur' }],
            type: [{  required: true, message: '请选择类别', trigger: 'change' }]
          }
        }
      },
      mounted() { 
        if (this.value) { 
          this.dynamicInfo = this.value
        }
      },
      methods: { 
        validateForm(formName) { 
          let returnValue
          // 多个表单，所以验证时需要遍历
          this.$refs[formName].forEach(item => { 
            item.validate((valid) => { 
              if (valid) { 
                returnValue = true
              } else { 
                returnValue = false
              }
            })
          })
          return returnValue
        },
        resetForm(formName) { 
        // 多个表单，所以验证时需要遍历
          this.$refs[formName].forEach(item => { 
            item.resetFields()
          })
        },
        remove(item, index) { 
          if (this.dynamicInfo.length > 1) { 
              this.dynamicInfo.splice(index, 1)
          }
        },
        add() { 
          this.dynamicInfo.push({ 
            name: '',
            type: ''
          })
        }
      },
      watch: { 
        value: { 
          handler(data) { 
            this.dynamicInfo = this.value
          },
          deep: true
        },
        dynamicInfo: { 
          handler(data) { 
            this.$emit('input', this.dynamicInfo)
          },
          deep: true
        }
      }
    }

## 使用动态表单组件 ##

<account-form ref="accountInfo" v-model="dynamicInfo" />
    
    ...
    data() { 
        return { 
          dynamicInfo: []
        }
    }
    ...