vue+element el-input组件oninput校验与表单校验rules冲突问题

在Vue中使用Element UI的el-input组件时，可以通过v-model来绑定数据，并使用@input来监听输入事件。同时，可以利用Element UI的表单验证规则rules来进行表单验证。

如果你在使用oninput和rules时发现冲突，主要原因可能是你在使用oninput进行了数据的实时校验，而rules是在表单提交时进行的验证。这两种方式校验的时机不同，因此容易造成冲突。

解决方案：

1. 如果你需要实时校验，那么可以在oninput中调用一个方法进行校验，而不是直接在oninput中写逻辑。然后在这个方法中，你可以使用this.$refs.formName.validateField('fieldName')来手动校验特定字段。
2. 如果你想要在输入后等待用户完成输入再进行校验，可以设置一个计时器，在计时器到期后进行校验。

示例代码：

<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字段。这样就可以在实时性和用户体验之间取得平衡。