el-select接收对象
时间: 2024-09-05 10:05:38 浏览: 112
Vue + Element-ui的下拉框el-select获取额外参数详解
`el-select` 是 Element UI(一个基于 Vue 2.0 的桌面端组件库)中的一个组件,用于创建下拉选择框。当 `el-select` 需要接收对象类型的选项时,可以通过配置 `value-key` 属性来指定对象中哪个属性值作为实际的选中值。通常,对象类型的选项会包含两个重要的属性:一个是显示给用户看的文本(label),另一个是实际被选中时返回的值(value)。`value-key` 属性应该对应于对象中作为值的属性名。
例如,如果你有如下的对象数组:
```javascript
[
{ value: 1, label: '选项1' },
{ value: 2, label: '选项2' },
// 更多选项...
]
```
在 `el-select` 中,你可以这样使用:
```html
<el-select v-model="value" value-key="value">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
```
在这里,`v-model` 绑定了选择的值,`value-key="value"` 表示使用对象中的 `value` 属性作为实际选中的值。而 `el-option` 组件通过 `:label` 和 `:value` 属性分别绑定对象的 `label` 和 `value` 属性,使得下拉框在用户界面上显示正确的文本,并在选中时返回正确的值。
阅读全文