el-select 的value-key的使用

`el-select` 是一个基于 Element UI 的下拉选择框组件，`value-key` 属性用于指定选项对象中表示选项值的属性名称。默认情况下，`el-select` 会把选项对象整个作为选项的值提交给父组件，但是有时候我们需要指定选项对象中的某个属性作为选项的值。

举个例子，如果我们有一个选项列表如下：

[
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' }
]

如果我们想让 `el-select` 组件提交选项的 `id` 属性作为值，那么可以这样使用：

<el-select v-model="selectedFruit" :options="fruits" value-key="id"></el-select>

当选择了 `"Apple"` 时，`selectedFruit` 的值会被设置为 `1`。如果没有指定 `value-key`，那么 `selectedFruit` 的值会被设置为 `{ id: 1, name: 'Apple' }`。

相关问题

el-select value-key

el-select的value-key是指在el-select组件中，用于绑定选项值的属性名。例如，如果我们有一个选项对象，其中包含id和name两个属性，我们可以将value-key设置为"id"，这样在选中该选项时，el-select会将该选项的"id"属性值作为选中值进行绑定。

el-select value-key回显

el-select的value-key属性用于指定回显数据的值的键名。通常情况下，回显的value应该和选项的value类型相同。如果回显的value和选项的value类型不同，就会导致回显option选项的value而不是显示label的问题。解决这个问题的方法是将选项的value转换为与回显的value类型相同。例如，如果回显的value是字符串类型，而选项的value是数字类型，可以将选项的value转换为字符串类型，即在:value="item.id"后面加上两个单引号，变成:value="item.id ''"。这样就可以正确回显label而不是value了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-select的值为对象时，使用value-key回显](https://blog.csdn.net/m0_48486615/article/details/126097458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [解决el-select回显异常 显示option选项的value 而不是显示label](https://blog.csdn.net/u013675978/article/details/121977552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [element中el-select绑定值为对象并回显问题](https://blog.csdn.net/qq_42092195/article/details/123254624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]