如何使用vue 3和Element Plus ui库访问子属性引用

Question

我有一个名为' dropdown‘的dropdown组件的引用

当选择一个项目时，我想要获得所选的标签(我可以获得值，但它与标签不同)

当我执行dropdown.value时，我得到了一个对象，在这个对象中我可以看到我想要的键值，它是'selectedLabel‘

如果我执行dropdown.value.selectedLabel，我会得到空白，并且dropdown.value.selectedLabel.value是未定义的。

https://codesandbox.io/s/element-plus-demo-forked-2n982?file=/src/App.vue

请查看图片以查看模板和我返回的日志：

​

<template>
  <div class="dropdown-component">
    <div class="label">{{name}}</div>
    <div class="select-container">
      <el-select
        ref="dropdown"
        v-model="selectedValue"
        filterable
        @change="$emit('OPTION_SELECTED', selectedOptionData())"
        :placeholder="placeholderText"
      >
        <el-option
          v-for="(item,index) in options"
          :key="index"
          :label="getLabel(item)"
          :value="getValue(item)"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { ref, defineComponent, watchEffect, computed } from 'vue'
import { getAPIObjFor } from '@/lib/ymm/YMMApi'

export default defineComponent({
  props: {
    labelKey: String,
    valueKey: { type: String, default: '' },
    name: String,
    next: String,
    groupState: Object
  },

  emits: ['OPTION_SELECTED'],

  setup (props) {
    console.log('Initing Dropdown-', props.name)

    const options = ref([])
    const selectedValue = ref('')
    const activeQueryParam = ref('')
    const dropdown = ref(null)
    const apiQueryObj = getAPIObjFor(props.name)

    const getOptionData = async ({ apiQuery, apiRequest }) => {
      // keep log
      console.log('%c' + props.name + ' query:', 'color:orange', apiQuery)
      activeQueryParam.value = apiQuery
      options.value = await apiRequest(apiQuery)
    }

    const getLabel = (_item) => {
      return _item[props.labelKey]
    }

    const getValue = (_item) => {
      const valueKey = props.valueKey === '' ? props.labelKey : props.valueKey
      return { value: _item[valueKey], label: getLabel(_item), x: 'x' }
    }

    const selectedOptionData = () => {
      // eslint-disable-next-line dot-notation
      // eslint-disable-next-line vue/no-ref-as-operand
      // eslint-disable-next-line
      console.log('selected dropdown', dropdown.value, dropdown.value.clearIcon, dropdown.value.selectedLabel)
      const { name } = props
      const { value, label } = selectedValue.value
      const selectedData = {
        [`${name}`]: {
          value,
          label,
          next: props.next
        }
      }
      return selectedData
    }

    const placeholderText = computed(() => {
      return `Select a ${props.name}`
    })

    watchEffect(() => {
      const query = apiQueryObj(props.groupState)
      if (query && query.apiQuery !== activeQueryParam.value) {
        selectedValue.value = ''
        getOptionData(query)
      }
    })

    return { options, getValue, getLabel, selectedValue, selectedOptionData, placeholderText, dropdown }
  }
})
</script>

<style lang="scss" scoped>

.dropdown-component {
  max-width: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .select-container {
    max-width: 400px;
    display: flex;
    min-width: 20px;
    flex-grow: 1;
  }

  .el-select {
    width: 100%;
  }
}

</style>

Answer 1

您可以使用el-select的selected属性而不是selectedLabel，因为某些原因，它似乎总是为空。

selected属性包含一个由选定选项组成的数组(每个选项都包含一个currentLabel属性)，其中最后一个数组元素是最近选定的。但是，selected属性是在change事件之后更新的，因此您必须等待下一个刻度，然后才能访问它。

import { nextTick } from 'vue'
//...

const selectedOptionData = async () => {
  await nextTick()
  const selected = dropdown.value.selected.at(-1).currentLabel
  console.log('selectedLabel', selected)
  //...
}

此外，您的@change事件处理程序必须修改为异步，才能正常工作：

<el-select @change="onChange">

export default {
  setup(props, { emit }) {
    const onChange = async () => {
      emit('OPTION_SELECTED', await selectedOptionData())
    }

    return { onChange }
  }
}

demo

只需注意，删除标记时也会发生change-event。