第9节ref 实例方法 el-form 表单校验集成本节讲两个高频业务场景用 ref 拿到 select 实例主动调方法、把 select 放进 el-form 做必填校验。核心知识点ref 实例方法通过refselectRef拿到组件实例可调用focus()、blur()、clear()、getSelected()等方法el-form 校验el-select 放进el-formel-form-item配合rules做必填校验注意prop必须和v-model字段名一致校验触发时机trigger: change选中项变化立即触发校验完整可测试代码template div classcontainer h4ref 实例方法 表单校验/h4 el-form refformRef :modelform :rulesrules label-width80px stylemax-width: 420px el-form-item label技术栈 proptech el-select refselectRef v-modelform.tech placeholder请选择技术栈 clearable stylewidth: 100% el-option labelVue valuevue / el-option labelReact valuereact / el-option labelAngular valueangular / /el-select /el-form-item el-form-item el-button clickhandleFocus主动聚焦/el-button el-button clickhandleClear主动清空/el-button el-button typeprimary clickhandleSubmit提交校验/el-button /el-form-item /el-form /div /template script setup import { ref, reactive } from vue const formRef ref(null) const selectRef ref(null) const form reactive({ tech: }) const rules { tech: [ { required: true, message: 请选择技术栈, trigger: change } ] } // 主动聚焦会自动展开下拉弹窗 const handleFocus () { selectRef.value.focus() } // 主动清空选中值 const handleClear () { selectRef.value.clear() } // 提交前整体校验 const handleSubmit async () { try { await formRef.value.validate() alert(校验通过提交成功 form.tech) } catch (e) { console.log(校验失败, e) } } /script style scoped .container { padding: 20px; } /style测试要点不选直接点 “提交校验”表单项下方红字提示 “请选择技术栈”主动聚焦按钮下拉框自动聚焦并展开弹窗主动清空按钮选中的值被清空触发 change校验状态重置选中一项后再提交校验通过弹出 alert业务坑提醒el-form-item的prop必须和form对象里的字段名一致否则校验不生效rules里trigger: change因为 select 是选择事件不是输入事件不要用blurclear()方法会同时清空选中值并触发 change所以清空后校验会自动重新跑如果用了multiplev-model 是数组校验规则要写type: array