Element UI 表单取消按钮，清空input数据

DMH.

已于 2023-08-22 15:31:21 修改

阅读量2.1k

点赞数

文章标签： vue.js elementui

于 2022-09-16 15:45:37 首次发布

本文链接：https://blog.csdn.net/weixin_53987328/article/details/126891641

版权

Element UI 表单取消按钮，清空input数据

提示:Element UI里的el-form表单

表单刚开始的时候要绑定ref属性，不然在调用$refs时会找不到你传进来的表单名

el-form-item标签上绑定prop属性，prop属性的属性值就是对应表单里的参数名

<el-button 
			type="primary"
			icon="el-icon-plus" 
			@click="adduser"
			style=" margin-left: 335px">
			添加用户
</el-button>

 				<!--添加用户-->
                <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
                    <el-form :model="formss" ref="formss">
                        <el-form-item label="姓名" prop="username">
                            <el-input v-model="formss.username" style="width: 180px" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号码" prop="idCard">
                            <el-input v-model="formss.idCard" style="width: 180px" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="formss.phone" style="width: 180px" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" prop="address">
                            <el-input v-model="formss.address"  style="width: 280px" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="callOf('formss')">取 消</el-button>
                        <el-button type="primary" @click="create_user('formss')">确 定</el-button>
                    </div>
                </el-dialog>

调用重置方法

callOf(formName){
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();//点击取消按钮，清空el-input
            }