elementUI 级联选择框 表单验证

今天遇到了一个需求：进行级联选择框的表单验证，突然有点懵逼。感觉应该和正常的表单验证类似，但不是很清晰，后来还是在博客园找到了相关参考文章。

先上代码：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="选择分类" prop="sorts">
     <el-cascader
       :options="options"
       change-on-select
       filterable
       v-model="ruleForm.sorts"
       clearable></el-cascader>
  </el-form-item>
</el-form>

data() {
  /*表单验证*/
  ruleForm: {
    sorts: '',
  },
  /*验证规则*/
  rules: {
    sorts: [
        { type: 'arary', required: true, message: '请选择分类', trigger: 'change'}
    ],
  }
}

实际上看上面的代码和表单验证并无太大区别，只是将 el-table-item 里面的 el-input 标签换成了 el-cascader，其表单验证以及规则都是相似的。

需要注意的是：

1. 级联选择框验证规则的触发事件是 change 事件，当级联选择器的内容发生变化时会触发验证。

2. 如果验证无法生效，首先需要检查 prop 是否绑定了表单的验证规则，以及 el-cascader 里面的 v-model 是否绑定了表单验证属性；然后由于级联选择器选中的内容是以数组的形式存在，要注意 设置验证规则里面的 type 值为 array。

参考文章：https://www.cnblogs.com/fur-mat/p/11984242.html