点重置快速清空的方法

 <el-form status-icon :rules="rules" :model="ruleForm" ref="ruleForm" :label-position="labelPosition" label-width="100px">
                <titleInfo>
                    <li>人员基本信息</li>
                </titleInfo>
                <div class="search_input clearfix">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="机构名称:" prop="orgnName" >
                                <el-input v-model="ruleForm.orgnName" auto-complete="off" readonly>
                                    <el-button slot="append" icon="el-icon-search" @click="orgnQuery" ></el-button>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人员角色:" prop="roleId">
                                <el-select v-model="ruleForm.roleId"  placeholder="请选择角色" >
                                    <el-option v-for="item in roleDroplist" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人员工号:" prop="workNo">
                                <el-input type="text" v-model="ruleForm.workNo" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="人员姓名:" prop="userName" >
                                <el-input type="text" v-model="ruleForm.userName" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="身份证号:" prop="idNo">
                                <el-input type="text" v-model="ruleForm.idNo" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="教育背景:" prop="education" >
                                <el-select v-model="ruleForm.education"  placeholder="请选择性别">
                                    <el-option v-for="item in educationSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" >
                            <el-form-item label="性别:" prop="gender" >
                                <el-select v-model="ruleForm.gender"  placeholder="请选择性别">
                                    <el-option v-for="item in genderSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="出生日期:"   prop="birthday">
                                <el-date-picker
                                v-model="ruleForm.birthday"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择出生日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="手机号:" prop="phone" >
                                <el-input type="text" v-model="ruleForm.phone" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="QQ:" prop="qq" >
                                <el-input type="text" v-model="ruleForm.qq" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="微信:"  prop="wechat">
                                <el-input type="text" v-model="ruleForm.wechat" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人员状态:" prop="status" >
                                <el-select v-model="ruleForm.status"  placeholder="请选择状态">
                                    <el-option v-for="item in statusSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <titleInfo>
                <li>设置初始密码</li>
                </titleInfo>
                <div class="clearfix">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="密码:" prop="userpwd">
                                <el-input type="password" v-model="ruleForm.userpwd"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="确认密码:" prop="checkUserpwd">
                                <el-input type="password" v-model="ruleForm.checkUserpwd"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <titleInfo>
                <li>家庭与工作信息</li>
                </titleInfo>
                <div class="clearfix">
                    <el-row>
                        <el-col :span="8" class="clearfix">
                            <el-form-item label="家庭住址:"  prop="address">
                                <el-input type="text" v-model="ruleForm.address" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="家庭电话:" prop="mobile">
                                <el-input type="text" v-model="ruleForm.mobile" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" class="clearfix">
                            <el-form-item label="电子邮箱:"  prop="mail">
                                <el-input type="text" v-model="ruleForm.mail" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col :span="8">
                        <el-form-item label="工作电话:"prop="workphone" >
                            <el-input type="text" v-model="ruleForm.workphone" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="传真:"  prop="fax">
                            <el-input type="text" v-model="ruleForm.fax" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Notes邮箱:" prop="notesMail" >
                            <el-input type="text" v-model="ruleForm.notesMail" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </div>
                <titleInfo>
                    <li>保存信息</li>
                </titleInfo>
                <div class="btn_bottom">
                    <button class="btn search"  @click="save">保存</button>
                    <button class="btn repeat"  @click="quit">取消</button>
                    <button class="btn repeat"  @click="rest">重置</button>
                </div>
            </el-form>

 在每个el-form-item  标签上加上prop="xxx"  这个xxx对应的el-input 标签上的  比如prop="notesMail"  

接着点击重置按钮重置执行这个重置的方法 ruleForm对应上你表单的 

  //重置
      rest() {

        this.$refs.ruleForm.resetFields()
      },

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐