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