在Vue中使用Element UI的el-input组件时，可以通过v-model来绑定数据，并使用@input来监听输入事件。同时，可以利用Element UI的表单验证规则rules来进行表单验证。
如果你在使用oninput和rules时发现冲突，主要原因可能是你在使用oninput进行了数据的实时校验，而rules是在表单提交时进行的验证。这两种方式校验的时机不同，因此容易造成冲突。
解决方案：
- 如果你需要实时校验，那么可以在
oninput中调用一个方法进行校验，而不是直接在oninput中写逻辑。然后在这个方法中，你可以使用this.$refs.formName.validateField('fieldName')来手动校验特定字段。 - 如果你想要在输入后等待用户完成输入再进行校验，可以设置一个计时器，在计时器到期后进行校验。
示例代码：
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item prop="username">
<el-input v-model="form.username" @input="handleInput"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
]
}
};
},
methods: {
handleInput() {
// 使用计时器避免频繁触发验证
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.$refs.form.validateField('username');
}, 500);
}
}
};
</script>在这个例子中，handleInput方法会在每次输入时被触发，并设置一个计时器。当计时器到期后，会调用表单的validateField方法来校验username字段。这样就可以在实时性和用户体验之间取得平衡。