Vue+ElementUI 将表单做成组件公用，添加slot方法便于外部添加其他

        多个界面内容展示类似，都需要提交相同的表单，为方便之后的需求变更，通过插槽可以添加新的表单项。表单放在dialog中，将此作为组件，在页面中进行调用。

        整体思路：子组件中正常创建表单，父组件调用时，在插槽中添加el-form-item，将所有的v-model统一存在一个对象中，通过props传递给子组件，在每个item中写好rules，在各个控件中写入:validate-event="false"（因为在表单验证的时候会有些问题出现，所以这里采用统一的点击按钮后进行验证），最后在子组件即将提交表单时将数据合并，完成验证后传给后台。

子组件添加插槽：

      <el-form :model="submitForm" ref="submitForm" :rules="submitRules" label-width="100px" >
        <el-form-item label="备注：">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            v-model="submitForm.remarks">
          </el-input>
        </el-form-item>
        <el-form-item label="发送人：" prop="sendPerson">
          <el-select v-model="submitForm.sendPerson">
            <el-option
              v-for="(item,index) in sendOptions"
              :key="index"
              :label="item"
              :value="index">
            </el-option>
          </el-select>
        </el-form-item>

        //此处添加插槽
        <slot name="formItem"></slot>
      </el-form>

不进行任何添加效果 

 

父组件调用：

    <ApprovalSubmitForm
         ref="ApprovalSubmitForm" 
        :sendOptions="sendOptions" 
        :formItem="formItem" //传递控件双向绑定的数据
    >
      <template slot="formItem">
        <el-form-item label="备注：" prop="input" :rules="{required: true, message:'请输入', trigger: 'blur'}">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            :validate-event="false"//取消验证事件
            v-model="formItem.input">
          </el-input>
        </el-form-item>
      </template>
    </ApprovalSubmitForm>


    //data中的数据定义：
      formItem:{
        input:''
      }, 

子组件中确认按钮验证并提交：

      handleConfirm(){
        //合并数据
        this.submitForm = {...this.submitForm,...this.formItem}

        this.$nextTick(()=>{
          const {validate} = this.$refs.submitForm
          validate(valid => {
            if (valid){
              console.log("submit",this.submitForm)
              this.submitDialogVisible = false
            }else{
              this.$message({
                message: '请填写完整信息',
                type: 'warning'
              });
            }
          })
        })

添加完成后： 

 可能会遇到一些bug，先记录一下吧...