Vue3配合Element Plus如何访问el-select组件ref的selectedLabel属性

根因说明 #

• Chrome控制台打印对象为引用类型，你展开查看属性时才会读取最新值，而代码同步执行访问dropdown.value.selectedLabel时，el-select内部状态还未完成更新，所以拿到空值。
• Element Plus的change事件触发时机早于组件内部selectedLabel属性的更新时机，同步访问时该属性还未赋值。
• 另外selectedLabel属于组件内部私有属性，后续版本迭代可能变更，不建议业务代码直接依赖。

解决方法 #

方法1：用nextTick等待组件状态更新后取值

首先从vue中导入nextTick，将获取逻辑改为异步：

import { ref, defineComponent, watchEffect, computed, nextTick } from 'vue'

// 修改selectedOptionData方法
const selectedOptionData = async () => {
  await nextTick()
  // 此时即可拿到正确的selectedLabel值
  console.log(dropdown.value.selectedLabel)
  // 后续逻辑不变
}

注意需要把@change的触发逻辑也改成异步：@change="async () => $emit('OPTION_SELECTED', await selectedOptionData())"

方法2：直接从绑定的selectedValue中取（适配你当前代码逻辑）

你当前给el-option的value绑定的是包含label字段的对象，直接取selectedValue.value.label即可拿到选中项的label，不需要访问组件实例，是最稳妥的方案：

const selectedOptionData = () => {
  const { name } = props
  // 直接从绑定值取，不需要操作ref
  const { value, label } = selectedValue.value
  const selectedData = {
    [`${name}`]: {
      value,
      label,
      next: props.next
    }
  }
  return selectedData
}

方法3：通过选中值匹配options数组取label

如果你的绑定值没有内置label，可以自己遍历选项数组匹配，不受组件内部属性变更影响：

const selectedOptionData = () => {
  const selectedItem = options.value.find(item => {
    // 匹配规则根据你实际的value结构调整
    return getValue(item).value === selectedValue.value.value
  })
  const label = selectedItem ? getLabel(selectedItem) : ''
  // 后续逻辑
}

内容的提问来源于stack exchange，提问作者user1088963