Vue+ElementUI 将表单做成组件公用,添加slot方法便于外部添加其他
整体思路:子组件中正常创建表单,父组件调用时,在插槽中添加el-form-item,将所有的v-model统一存在一个对象中,通过props传递给子组件,在每个item中写好rules,在各个控件中写入:validate-event="false"(因为在表单验证的时候会有些问题出现,所以这里采用统一的点击按钮后进行验证),最后在子组件即将提交表单时将数据合并,完成验证后传给后台。多个界面内容展示
·
多个界面内容展示类似,都需要提交相同的表单,为方便之后的需求变更,通过插槽可以添加新的表单项。表单放在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,先记录一下吧...
更多推荐
已为社区贡献4条内容
所有评论(0)