vue element-ui form表单重置 快捷方法
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
点重置快速清空的方法
<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 个月前
更多推荐
已为社区贡献10条内容
所有评论(0)