el-dropdown显示上次选中的选项（加上template#dropdowntemplate）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
el-dropdown显⽰上次选中的选项（加上
template#dropdowntemplate）
<template>
<div class="home">
<el-dropdown :hide-on-click="false" @command="statusChange">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right" />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(item,index) in dropList"
:key="index"
:command="item.value"
:class="{'selected':status==item.value}"
>{{ bel }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
components: {},
data() {
return {
status: '2',
dropList: [
{ value: '1', label: '黄⾦糕' },
{ value: '2', label: '狮⼦头' },
{ value: '3', label: '螺蛳粉' },
{ value: '4', label: '双⽪奶' }
],
}
},
methods: {
statusChange(val) {
console.log('drop statusChange', val)
this.status = val
},
}
}
</script>
<style scoped lang="scss">
.selected{
color:red;
}
</style>。