VUE ? ?? UI ??? ?? ?? ??? ??? ??? ??? ???? ???? ??? ?? ??? ??, ??-?? ?? ? ??? ??? ?????. ???? ??? ????. ?? ?? ??? ?? ??? ???? ??? ??? ?? ??? ?? ??? ??????. ??? ?????? ???? ValidateField ?? Validate ???? ???? ???? ?? ??? ????????. ??? ??? ??? ?? ??? ??????. ???? ?? ??? ?? ??? ?????. ??? ??? ??? ???? ???? ?? ??? ??????.

vue ? element-ui ??? ?? ?? ?? ??? ?? : ??? ??? ??

?? ???? VUE ? Element-UI? ???? ????? ?? ? ? ??? ?? ???? ??? ?? ??? ?????. ??? ?? ? ??? ?? ???? ?? ?????. ? ?????? ??? ???? ???? ???? ??? ??? ??? ?? ??? ? ???. ??? ?? ??? ?? ??? ?? ??? ?? ?? ????? ??? ??? ??? ? ????.

?? ??? ?? ?? ??? ? ???. Vue? ?? ?? ????? ?? ???? ?? UI ?? ??? ?? ??? ??? ?? ? ? ????. Element-UI ??? el-cascader ?? ???? ?? ?? ??? ???? ?? ???????. ??? ??? v-model ????? ?? ? ? ??? ?? if ???? ?? ? ? ????. ????? ?? ??? ??? ??? ??? ??? ??? ??? ??? ?? ??? ?? ?? ?? ??? ????? ??? ???????. ? ???? ??? ?????.

?? ??? ???? ????? : ?? ??. ?? ??? ? ???? el-cascader ? ?? ?? ??? ?? ??? ?? ???? ????. ?? ??, ??? change ?? ??? ?? ???? ?? ??? ??? ? ????.

 <code class="vue"><template> <el-form :model="formData" :rules="rules" ref="formRef"> <el-form-item label="級(jí)聯(lián)選擇框" prop="cascaderValue"> <el-cascader v-model="formData.cascaderValue" :options="options"></el-cascader> </el-form-item> <el-button type="primary">提交</el-button> </el-form> </template> <script> import { ref, reactive } from &#39;vue&#39;; export default { setup() { const formData = reactive({ cascaderValue: [] }); const options = [ // 你的級(jí)聯(lián)選擇框數(shù)據(jù)]; const rules = { cascaderValue: [{ required: true, message: &#39;請(qǐng)選擇&#39;, trigger: &#39;change&#39; }] }; const formRef = ref(null); const handleCascaderChange = (value) => { // 在這里進(jìn)行自定義校驗(yàn)if (value && value.length > 0 && value[0].value === &#39;invalid&#39;) { formRef.value.validateField(&#39;cascaderValue&#39;); } }; const handleSubmit = () => { formRef.value.validate((valid) => { if (valid) { console.log(&#39;提交成功&#39;, formData.cascaderValue); } else { console.log(&#39;校驗(yàn)失敗&#39;); } }); }; return { formData, options, rules, formRef, handleCascaderChange, handleSubmit }; } }; </script></code>

? ????? Form Verification? Element-UI? el-form ? el-form-item ?? ??? ?????. rules ??? ?? ??? ?????. ????? ?? ??? ?? ??? ?? ??? ???? ?? ?? ? ? handleCascaderChange ??? ??????. handleSubmit ??? ??? ?????. ??? ??? ??????. ?? ?? ??????? ??? ?? ? ??? ?? ??? ???????.

???? ?? ?? ??? ????. ??? ??. ?? ??? ??? ????? ??? ?? ??? ??? ??? ?? ??? ?? ??? async/await ?? Promise ???????. ??? ??? ? ??? ?? ??? ?????? ?? ??? ??? ? ??? ??? ???? validateField ?? validate ???? ???????.

?? ??? ???? handleCascaderChange ?? ???? ??? ??? ?????. ?? ?? ?????? ?? ?? ?? ?? ?? ??? ??? ???? ??? ?? ?????. ??? ???? ?? ???? ???? ???? ???? ?? ??? ????? ??????.

?????, ???? ?? ??, ??? ?? ?? ?? ?? ??? ??? ??? ?? ?? ????. ??? ?? ?? ????? ???? ??? ??? ?? ??? ?? ? ? ???? ? ? ????. ???, ??? ?? ??? ??? ??? ?? ? ???? ??? ??? ??? ????? ??? ?? ??? ???? ???????. ? ?? ???? ? ?? ????? Vue ? Element-UI? ?? ???? ? ????!

? ??? vue ? element-ui ??? ?? ?? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!