<template>
<el-dialog
v-model="dialogVisible"
style="width: 20%"
:title="title"
@close="closeDialog"
>
<el-form id="myForm" ref="ocrmForm1" label-width="120px" :model="form">
<el-form-item label="名称" >
<el-input v-model="form.data.title" />
</el-form-item>
<el-form-item label="调用方法" >
<el-input v-model="form.data.actionName" />
</el-form-item>
<el-form-item label="参数" >
<el-input v-model="form.data.params" />
</el-form-item>
<el-form-item label="备注" >
<el-input v-model="form.data.memo" />
</el-form-item>
<el-form-item label="调用接口URL">
<el-input v-model="form.data.interfaceUrl" />
</el-form-item>
<div class="dialog-footer">
<el-button @click="reset">重置</el-button>
<el-button @click="confirm">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</el-form>
</el-dialog>
</template>
自己写了个表单,做重置功能的时候代码没能重置,重置点击事件如下
const ocrmForm1 = ref('')
const reset = () => {
ocrmForm1.value.resetFields()
}
后来发现是没有给prop,更给表单内,添加上prop就可以用了
<template>
<el-dialog
v-model="dialogVisible"
style="width: 20%"
:title="title"
@close="closeDialog"
>
<el-form id="myForm" ref="ocrmForm1" label-width="120px" :model="form">
<el-form-item label="名称" prop="data.title">
<el-input v-model="form.data.title" />
</el-form-item>
<el-form-item label="调用方法" prop="data.actionName">
<el-input v-model="form.data.actionName" />
</el-form-item>
<el-form-item label="参数" prop="data.params">
<el-input v-model="form.data.params" />
</el-form-item>
<el-form-item label="备注" prop="data.memo">
<el-input v-model="form.data.memo" />
</el-form-item>
<el-form-item label="调用接口URL" prop="data.interfaceUrl">
<el-input v-model="form.data.interfaceUrl" />
</el-form-item>
<div class="dialog-footer">
<el-button @click="reset">重置</el-button>
<el-button @click="confirm">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
</el-form>
</el-dialog>
</template>