共计 1991 个字符,预计需要花费 5 分钟才能阅读完成。
最近在开发一个性能,一个表单外面有输入框,每个输入框下面有一个 switch 开关,开启则必填,不开启的话则该输入框的值能够为空。
我把校验规定写在了 el-form-item 下面:
<el-form-item label="姓名" prop="name" :rules="[{required: Number(temp.isName), message:' 姓名不能为空 '}]"> | |
<el-input v-model.trim="temp.name" show-word-limit maxlength="45" type="text" placeholder="请输出姓名" /> | |
</el-form-item> |
这样开启和敞开时能够解决表单校验的问题,然而当初会呈现一个问题,当 switch 开启的时候,我触发了校验,而后再敞开 switch,点击确认,然而页面上的报红提醒仍旧存在。尽管这时候校验曾经去掉了,除非触发了输入框的 blur 事件,能力把报红提醒去掉。
起初查找了文档,发现了 clearValidate 办法。官网这样解释: 移除表单项的校验后果。传入待移除的表单项的 prop 属性或者 prop 组成的数组,如不传则移除整个表单的校验后果。
我拿到这个办法监听 switch 的敞开事件,当 switch 敞开后去掉对应的表单校验,就能够实时更新页面上的报红提醒了:
watch: { | |
// 监听姓名开关敞开时,去掉 "姓名不能为空" 的校验 | |
'temp.isName'(val) {if (val == '0') {this.$refs['dataForm'].clearValidate('name'); | |
} | |
}, | |
}, |
上面是残缺代码:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>element-ui 开发: 选中赠品弹层中的数据并展现在页面上,弹层展现选中状态 </title> | |
<!-- 引入 element-ui 的款式,--> | |
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> | |
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> | |
<!-- 引入 element 的组件库 --> | |
<script src="https://unpkg.com/element-ui/lib/index.js"></script> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
#app {margin: 100px;} | |
.switch-wrap {position: relative;} | |
.el-switch { | |
position: absolute; | |
top: 10px; | |
left: 50px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="app"> | |
<el-form ref="dataForm" :inline="true" label-width="80px" :model="temp" label-position="top"> | |
<div class="switch-wrap"> | |
<el-switch v-model="temp.isName" active-value="1" inactive-value="0"></el-switch> | |
<el-form-item label="姓名" prop="name" :rules="[{required: Number(temp.isName), message:' 姓名不能为空 '}]"> | |
<el-input v-model.trim="temp.name" show-word-limit maxlength="45" type="text" placeholder="请输出姓名" /> | |
</el-form-item> | |
</div> | |
</el-form> | |
<el-button type="primary" @click="submitFun"> 确认 </el-button> | |
</div> | |
<script> | |
new Vue({ | |
el: '#app', | |
data() { | |
return { | |
// 表单数据 | |
temp: { | |
isName: "1", | |
name: '' | |
}, | |
} | |
}, | |
watch: { | |
// 监听姓名开关敞开时,去掉 "姓名不能为空" 的校验 | |
'temp.isName'(val) {if (val == '0') {this.$refs['dataForm'].clearValidate('name'); | |
} | |
}, | |
}, | |
methods: { | |
// 赠品弹层点击确认 | |
async submitFun() {await this.$refs.dataForm.validate() | |
console.log(this.temp, '表单数据') | |
}, | |
} | |
}) | |
</script> | |
</body> | |
</html> |
正文完
发表至: javascript
2022-11-22