使用了element-ui的el-dropdown组件,但是不显示任何内容,只显示span内的字段和符号。换了点击触发也没用,重新换过element-ui的版本,也无效果。求指点一下。
main.js里面引用了dropdown。若直接复制对应版本(2.15.7)的dropdown组件过来也没有反应。同时浏览器会报错。
(重新引入dropdown组件后不会显示第一类错误了,但是依旧没有反应)
<template>
<div>
<el-menu
:default-active="currentPath"
router
mode="horizontal"
background-color="white"
text-color="#222"
active-text-color="red"
style="min-width: 1300px">
<span style="padding-top: 14px;float:left;font-size: 25px;font-weight: bold;width:180px;">CSL - Sales</span>
<el-menu-item style="text-align:center;" v-for="(item,i) in navList" :key="i" :index="item.name">
{{ item.navItem }}
</el-menu-item>
<div v-if="showUsername">
<el-dropdown style="padding-top: 12px;float:right;" trigger="click">
<span style="padding-top: 5px;font-size: 20px;width:90px;">{{showUsername}}</span>
<i class="el-icon-arrow-down"></i>
<el-dropdown-menu slot-scope="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-menu>
</div>
</template>
<script>
import Cookies from 'js-cookie'
export default {
name: 'NavMenu',
data () {
return {
navList: [...],
keywords: ''
}
},
computed: {
hoverBackground () {
return '#ffd04b'
},
currentPath () {
var x = this.$route.path.indexOf('/', 1)
if (x !== -1) {
return this.$route.path.substring(0, x)
} else {
return this.$route.path
}
},
showUsername () {
return Cookies.get('name')
}
},
methods: {
}
}
</script>