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

^^为欢几何^^

已于 2024-01-16 16:49:16 修改

阅读量1.8k

点赞数 6

CC 4.0 BY-SA版权

文章标签： elementui 前端 javascript vue.js

于 2023-11-22 16:38:11 首次发布

本文链接：https://blog.csdn.net/qq_52526079/article/details/134556711

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
        },