elementui下拉菜单dropdown的使用

最新推荐文章于 2025-09-24 12:03:47 发布

原创最新推荐文章于 2025-09-24 12:03:47 发布 · 1.1w 阅读

7 ·

CC 4.0 BY-SA版权

elementui 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个基于Element UI的下拉菜单组件实现方案，用于选择公司并存储公司ID。详细展示了如何通过@click和v-for指令绑定数据和事件，以及解决非选择触发回调的问题。

说一下我得使用场景,点击下拉菜单选择公司,然后存下公司id显示公司名字

//@command选择一项之后的回调函数,但是如果你把下拉菜单点开,没选它也触发,下面有解决办法
<el-dropdown @command="changeCompany">
    <span class="el-dropdown-link" style="color: #FFF;">
          {{company}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
      		//:command是上面@command的默认参数
          <el-dropdown-item  v-for="item in companyList" :key="item.id" :command="item.user_name+'-'+item.id">{{item.user_name}}</el-dropdown-item>
      </el-dropdown-menu>
</el-dropdown>

data(){
	return{
		company:'您还没选择公司',
        companyList:[],
	}
}

changeCompany(data){
                //console.log(data) //公司名-公司id
                // 处理点击时不选的错误
                if(typeof data == "object"){
                    return
                }
                // 取公司名并赋值
                this.company = data.split('-')[0]

                // 存下公司id
                localStorage.setItem("workAccountId",data.split("-")[1])
},