Vue2 el-cascader 表单校验明明选择了参数但是不触发rules

这个问题可能是由于el-cascader组件在Vue2中的一个已知问题，该问题与表单验证有关。当使用表单验证规则时，如果el-cascader组件没有正确地与表单绑定，或者没有正确地更新Model，可能会导致验证不触发。

解决方法通常包括以下几个步骤：

1. 确保el-cascader组件绑定了正确的v-model。
2. 确保在表单验证规则中使用了正确的属性路径。
3. 如果使用了v-model对象绑定，确保对象的属性在数据初始化时就已经定义。

示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="级联选择" prop="cascaderValue">
      <el-cascader
        v-model="form.cascaderValue"
        :options="options"
        clearable
      ></el-cascader>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        cascaderValue: [], // 确保数据已初始化
      },
      rules: {
        cascaderValue: [
          { required: true, message: '请选择级联值', trigger: 'change' },
        ],
      },
      options: [
        {
          value: 'option1',
          label: '选项1',
          children: [
            {
              value: 'child1',
              label: '子选项1',
            },
          ],
        },
        // ...其他选项
      ],
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('验证通过!');
        } else {
          console.log('验证失败!');
          return false;
        }
      });
    },
  },
};
</script>

在这个例子中，form对象有一个cascaderValue属性，它与el-cascader组件的v-model绑定。在rules对象中，有一个cascaderValue属性定义了相应的验证规则。在实际使用时，确保form.cascaderValue已经在数据初始化时定义，否则可能导致表单验证不触发。