超简单的重置表单方法---利用elementui如何重置表单

1.在dialog对话框添加close方法,执行在关闭时要进行的操作并在form表单绑定ref

2.使用resetFields方法重置表单

3.重置表单具体实现代码

 <el-dialog
            title="获取行数"
            :visible.sync="dialogLogVisible"
            width="25%"
            @closed="resetForm"
        >
            <el-form :model="logInfo" ref="itemForm">
                <el-form-item label="行数" prop="line_num" label-width="10%">
                    <el-input
                        v-model.trim="logInfo.line_num"
                        autocomplete="off"
                        placeholder="请输入行数"
                        class="line"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitLog">确 定</el-button>
            </div>
        </el-dialog>
        
        
        
        async resetForm() {
            await this.$refs['itemForm'].resetFields()
            this.isDetail = false
        },

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要清空 ElementUI 表单的内容,可以通过以下步骤实现: 1. 获取表单对象 ```javascript const form = this.$refs.formName; ``` 其中,`formName` 是表单的 `ref` 属性值。 2. 重置表单 ```javascript form.resetFields(); ``` 这个方法会将表单中的所有输入框的值清空,并将验证状态重置。 3. 清空自定义组件的值 如果表单中包含自定义组件,需要在自定义组件中实现清空值的方法,并在表单重置时调用该方法。 完整的代码示例: ```javascript <template> <el-form ref="form" :model="formData" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="formData.gender"> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="爱好" prop="hobby"> <el-checkbox-group v-model="formData.hobby"> <el-checkbox label="reading">阅读</el-checkbox> <el-checkbox label="music">音乐</el-checkbox> <el-checkbox label="sports">运动</el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: { name: '', gender: '', hobby: [] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 提交表单 } else { return false; } }); }, resetForm() { this.$refs.form.resetFields(); // 清空自定义组件的值 this.$refs.customComponent.resetValue(); } } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值