element [Feature Request] Set object default value using label for select

yqyhoc1h 于 4个月前发布在其他

关注(0)|答案(3)|浏览(97)

Existing Component

Yes

Component Name

el-select

Description

I have an object that I want to set as default value for el-select.

There is a prop "value-key" that determines which field from the object to treat as a key. But it's also used as a label in this case.

How to set a "value-label" so the select's input displays custom label rather then the value of the key?

I use the below "hack" which is not really reliable:

this.$nextTick(() => {
    let label = object[this.labelKey]
    let elem = this.$refs.selectElem
    elem.selectedLabel = label
})

What is the correct way to accomplish that?

Element

来源：https://github.com/ElemeFE/element/issues/20706

3条答案

按热度按时间

yzckvree1#

You need to add the object into the candidates array that used for el-option

For example

<el-select
  v-model="yourDefaultObject"
  value-key="id"
>
  <el-option
    v-for="item in candidates"
    :key="item.id"
    :label="item.label"
    :value="item"
  />
</el-select>

赞(0）回复(0）举报 4个月前

vfwfrxfs2#

@pureliumy actually the problem persists when select is used with remote + filter option - the options are not populated unless users clicks the select element.

What is the best way to display the default value for object if options array is empty?

赞(0）回复(0）举报 4个月前

ttvkxqim3#

This problem still persists in version 2.15.9, only if the remote property is enabled.

I handle it this way, but as now I have to handle remote search, it stopped working:

this.value = responseLookupItem.value
  this.displayedValue = responseLookupItem.label

  this.$nextTick(() => {
    this.optionsList = responseLookupItem.list
  })

赞(0）回复(0）举报 4个月前

我来回答

element [Feature Request] Set object default value using label for select

Existing Component

Component Name

Description

3条答案

相关问题

热门标签

最新问答