el-dropdown-menu 设置默认值
时间: 2023-10-16 20:10:24 浏览: 230
el-dropdown-menu组件是Element UI库中的一个下拉菜单组件,它本身不支持设置默认值。但是可以通过设置el-dropdown组件的默认值来实现下拉菜单的默认选中项。
在使用el-dropdown组件时,可以通过v-model指令来绑定一个数据,该数据可以用来控制下拉菜单的展开与关闭。同时,可以使用el-dropdown-menu组件来定义下拉菜单的内容。
要设置默认值,只需要在绑定的数据上初始化为默认值即可。当绑定的数据与下拉菜单项的value属性匹配时,该下拉菜单项就会被选中。
以下是一个示例代码:
```html
<template>
<div>
<el-dropdown v-model="selectedItem">
<span class="el-dropdown-link">
下拉菜单
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu>
<el-dropdown-item v-for="item in menuItems" :key="item.value" :value="item.value">{{ item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: 'default' // 设置默认值
}
},
computed: {
menuItems() {
return [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
]
}
}
}
</script>
```
在上面的代码中,将selectedItem初始化为'default',则默认选中第一个下拉菜单项。
希望能对你有所帮助!如有其他问题,请继续提问。