element-ui 关于获取select 的label值方法

在 Element-UI 中，获取 Select 组件的 Label 值可以使用 ref 和 .getLabelText() 方法。首先，在 Select 组件上设置 ref 属性，如下所示：

<el-select v-model="selectedOption" ref="mySelect">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

接下来，在 JavaScript 中可以通过 this.\$refs.mySelect.getLabelText() 来获取选中项的 Label 值（如果是多选，则返回一个数组）。代码如下所示：

data() {
  return {
    selectedOption: '',
    options: [
      { value: 1, label: '选项一' },
      { value: 2, label: '选项二' },
      { value: 3, label: '选项三' },
    ]
  }
},
methods: {
  getSelectedOptionLabel() {
    const label = this.$refs.mySelect.getLabelText()
    alert(`当前选中项的 Label 是 ${label}`)
  }
}

需要注意的是，如果 Select 组件未选中任何项，则 .getLabelText() 方法将返回空字符串。因此，在获取 Label 值前需要判断选中项是否为空。

另外，对于滚动加载数据的 Select 组件，它的选项是异步加载的，此时需要等待选项加载完成后再使用 .getLabelText() 方法获取 Label 值。可以通过监听 Select 组件的 visible-change 事件来判断选项是否加载完成。代码如下：

<el-select v-model="selectedOption" ref="mySelect" @visible-change="onSelectVisibleChange">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

data() {
  return {
    selectedOption: '',
    options: null,
  }
},
methods: {
  async onSelectVisibleChange(isVisible) {
    if (isVisible) {
      // 模拟异步加载数据
      this.options = null
      await new Promise(resolve => setTimeout(() => {
        this.options = [
          { value: 1, label: '选项一' },
          { value: 2, label: '选项二' },
          { value: 3, label: '选项三' },
        ]
        resolve()
      }, 1000))
      this.$nextTick(() => {
        const label = this.$refs.mySelect.getLabelText()
        alert(`当前选中项的 Label 是 ${label}`)
      })
    }
  }
}