为什么校验有时生效、有时不生效？
上午测试时，校验不生效。原因是：测试的是 orderNum ，如下所示：

      <el-form-item label="属性排序" prop="orderNum">
        <el-input-number
          v-model="clsAttrForm.orderNum"
          :min="1"
          :disabled="isInherited"
      </el-form-item>
  // 校验规则
  clsAttrRules: {
    orderNum: [
      { required: true, message: "属性排序不能为空", trigger: "change" },
        pattern: /^([0-9][0-9]{0,2}|1000)$/,
        message: "请输入0-1000间的整数",
        trigger: "change",
但下午测试时，校验生效。原因是：测试的是 roleSort ，它有 @input.native 事件，如下所示：
    <el-form-item label="角色顺序" prop="roleSort">
      <el-input-number
        ref="refRoleSort"
        v-model.trim="form.roleSort"
        controls-position="right"
        @input.native="roleSortCheck"
    </el-form-item>
	// 校验规则
  rules: {
    roleSort: [
      { required: true, message: "角色顺序不能为空", trigger: "change" },
        pattern: /^([0-9][0-9]{0,2}|1000)$/,
        message: "请输入0-1000间的整数",
        trigger: "change",
原因：el-input-number 手动输入无法触发 change 校验
解决办法：绑定 `@input.native` 事件，根据 `ref` 获取实时值，赋值给 `el-input-number`
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
  <el-form-item label="角色顺序" prop="roleSort">
    <el-input-number
      ref="refRoleSort"
      v-model.trim="form.roleSort"
      controls-position="right"
      @input.native="roleSortCheck"
  </el-form-item>
</el-form>
// 表单校验
rules: {
  roleSort: [
    { required: true, message: "角色顺序不能为空", trigger: "change" },
      pattern: /^([0-9][0-9]{0,2}|1000)$/,
      message: "请输入0-1000间的整数",
      trigger: "change",
// methods 校验排序
roleSortCheck(val) {
  const key = this.$refs.refRoleSort.displayValue;
  if (val.data === null && key === "") {
    this.$set(this.form, "roleSort", undefined);
  } else {
    this.$set(this.form, "roleSort", key);
测试时要遵循同一对象原则。
最初测试提的也是 roleSort，当时的 bug 是怎样产生的呢？
VUE Element UI中el-input-number组件无法实时触发change事件
Element系列之el-input-number无法实时监听数据变化的解决方法