elementUI el-select 选择对象 value-key属性
value-key
属性在Element UI的el-select
组件中用于指定作为 value 的对象属性。当你的选项是对象数组时,你可以使用value-key
来指定每个对象中的哪个属性的值应该作为实际的选项值。
例如,如果你有一个对象数组,每个对象都有一个id
属性,你想要这个id
作为选项值,你可以这样使用value-key
:
<template>
<el-select v-model="selectedValue" placeholder="请选择" value-key="id">
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="item">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: null,
options: [
{ id: 1, label: '选项1' },
{ id: 2, label: '选项2' },
{ id: 3, label: '选项3' }
]
};
}
};
</script>
在这个例子中,v-model
绑定的是选中项的整个对象,但value-key="id"
告诉el-select
组件,你想要用对象中的id
属性值来作为实际的选中值。当你选择一个选项时,selectedValue
将会是该选项对应的整个对象,但是它的id
属性会被用作实际的选中值。
评论已关闭