formCreate不使用默认的提交按钮、重置按钮
<form-create :rule="formRule" :model="formData" :option="option" ref="formData"></form-create>
原来使用这种方式去生成表单,发现只能修改提交按钮,对重置按钮只能控制显隐,明显不能满足要求,
所以采用另一种方式,如下:
1、dom中写入代码
<div ref="fc" id="form-create"></div>
<el-row>
<el-col :sm="12" :md="12" :lg="12" :xl="12">
<Debounce :time="500" events="click" :immediate="true">
<button class="primaryButton" @click="saveData">保存</button>
</Debounce>
<el-button plain @click="resetForm" size="mini">取消</el-button>
</el-col>
</el-row>
2、data中定义$f
this.formRule, // 表单生成规则
3、在表单生成规则方法中调用生成表单方法
this.createForm();
4、实现创建表单方法
createForm() {
const root = this.$refs.fc;
root.innerHTML = '';
this.$f = this.$formCreate(
this.formRule,
{
el: root,
resetBtn: false,
submitBtn: false,
mounted: () => {
_this.loading = false
},
// 表单提交事件
onSubmit: (formData) => {
console.log(formData)
}
})
},
// 保存按钮
saveData() {
this.$f.submit();
},
参考示例:
https://github.com/HeyMrLin/fc-demo.git