el-cascader增加校验

在Element UI的Cascader（级联选择器）组件中，如果想要添加校验功能，你可以使用Vue的内置验证机制，结合自定义的验证规则。以下是一些步骤：

1. **设置v-model**: 首先，确保将Cascader的值绑定到一个Vue实例的数据属性上，这样你就可以监听其变化并进行验证。

<el-cascader v-model="selectedOptions" :options="options"></el-cascader>

2. **数据结构**: `options`应该包含一个`props`属性，其中包含你想用来验证的属性，例如`required`或`validProps`（可选的验证属性列表）。

data() {
  return {
    selectedOptions: [],
    options: [
      { value: '0-0', label: '一级分类', children: ... },
      ...
    ],
    validationRules: { // 自定义验证规则
      required: v => (v ? true : '请选择分类'),
    },
  };
}

3. **添加验证规则**: 在`watch`或`computed`中监听`selectedOptions`的变化，并使用`vuelidate`或自定义验证函数进行验证。`vuelidate`是一个轻量级的验证库，它可以帮助你在Vue组件中轻松地处理数据验证。

import { validate } from 'vuelidate';

export default {
  ...
  validations: {
    form: validate({
      selectedOptions: { required, ... },
    }),
  },
  watch: {
    selectedOptions(newVal, oldVal) {
      this.$v.form.validate();
      if (!this.$v.form.selectedOptions) {
        // 验证失败，显示错误消息
        console.error('Selected options validation failed');
      }
    },
  },
};

4. **错误提示**: 当验证失败时，你可以使用Vue的内置`$errors`属性或者第三方库提供的方法来显示错误消息。

记得在组件模板中处理`v-model`的`error`属性来显示错误提示，如`<span v-if="errors.selectedOptions">错误信息</span>`。