第9节：ref 实例方法 + el-form 表单校验集成

第9节：ref 实例方法 + el-form 表单校验集成

本节讲两个高频业务场景：用 ref 拿到 select 实例主动调方法、把 select 放进 el-form 做必填校验。

核心知识点

1. ref 实例方法：通过 ref="selectRef" 拿到组件实例，可调用 focus()、blur()、clear()、getSelected() 等方法
2. el-form 校验：el-select 放进 el-form + el-form-item，配合 rules 做必填校验，注意 prop 必须和 v-model 字段名一致
3. 校验触发时机：trigger: 'change'，选中项变化立即触发校验

完整可测试代码

<template>
  <div class="container">
    <h4>ref 实例方法 + 表单校验</h4>

    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      style="max-width: 420px"
    >
      <el-form-item label="技术栈" prop="tech">
        <el-select
          ref="selectRef"
          v-model="form.tech"
          placeholder="请选择技术栈"
          clearable
          style="width: 100%"
        >
          <el-option label="Vue" value="vue" />
          <el-option label="React" value="react" />
          <el-option label="Angular" value="angular" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleFocus">主动聚焦</el-button>
        <el-button @click="handleClear">主动清空</el-button>
        <el-button type="primary" @click="handleSubmit">提交校验</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>

测试要点

1. 不选直接点 “提交校验”：表单项下方红字提示 “请选择技术栈”
2. 主动聚焦按钮：下拉框自动聚焦并展开弹窗
3. 主动清空按钮：选中的值被清空，触发 change，校验状态重置
4. 选中一项后再提交：校验通过，弹出 alert

业务坑提醒

1. el-form-item 的 prop 必须和 form 对象里的字段名一致，否则校验不生效
2. rules 里 trigger: 'change'，因为 select 是选择事件不是输入事件，不要用 'blur'
3. clear() 方法会同时清空选中值并触发 change，所以清空后校验会自动重新跑
4. 如果用了 multiple，v-model 是数组，校验规则要写 type: 'array'

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/qq_36158551/article/details/166889195