el-select 同时获取key和value
时间: 2023-11-10 20:19:31 浏览: 183
在Vue的el-select组件中,可以通过设置el-option组件的label和value属性来同时获取Map集合的key和value。
以下是一个示例代码:
```html
<template>
<el-select v-model="selected" placeholder="请选择">
<el-option v-for="(value, key) in myMap" :key="key" :label="key" :value="value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
myMap: new Map([
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
]),
selected: null
};
}
};
</script>
```
在这个例子中,我们使用了element-ui提供的el-select和el-option组件,使用v-for指令遍历Map集合,将其key和value分别绑定到el-option组件的label和value属性上。同时,我们使用v-model指令将el-select组件和选中的值绑定到Vue实例中的selected属性上。
需要注意的是,我们需要在Vue实例的data属性中定义Map集合和selected属性,并且需要使用ES6的Map语法来创建Map集合。同时,我们需要引入element-ui组件库并正确配置Vue实例。
阅读全文