改造ElementUI中的el-dropdown下拉菜单_el-dropdown-menu样式修改

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
改造ElementUI中的el-dropdown下拉菜单

element文档地址：
https://element.faas.ele.me/#/zh-CN/component/dropdown
el-dropdown子项的点击事件目前只能通过@command 进行触发，然后执行自己方法，直接在el-dropdown-item 上绑定click事件没有效果
直接在 el-dropdown-item 绑定click事件的方法：参考博文
<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
<div class="sort">
    <el-dropdown placement="bottom-start" trigger="click" @command="handleCommandSort">
        <span class="el-dropdown-link">
			课程<i class="el-icon-arrow-down el-icon--right"></i>
		</span>
        <el-dropdown-menu slot="dropdown">
            <el-container class="sort-list-container">
                <el-main class="sort-list-main">
                    <div class="sort-title" v-text="'课程分类'"></div>
                    <el-dropdown-item 
                        v-for="(item, index) in list" 
                        class="sort-item"
                        :command="index">
                        <span v-text="item.name"></span>
                    </el-dropdown-item>
                </el-main>
            </el-container>
        </el-dropdown-menu>
    </el-dropdown>
</div>
<style>
/* 课程分类的下拉菜单 start */
/* 设置最外层的div */
.sort {
    display: inline-flex;
    width: 50%;
    height: 100%;
    margin-left: 40px;
    justify-content: start;
    align-items: center;
.el-dropdown-link {
    cursor: pointer;
.el-dropdown {
    font-size: 16px;
/* 设置弹出框的宽高 */
.el-dropdown-menu {
    width: 570px;
    height: 300px;
    padding: 10px 20px;
/* 设置选项样式 */
.sort-item{
    display: inline-block;
    min-width: 110px;
    padding: 0 10px;
    margin: 10px 12px 2px 0;
    border-radius: 16px;
    line-height: 32px;
    font-size: 14px;
    color: #333333;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.04);
    cursor: pointer;
.sort-title {
    width: 100%;
    line-height: 18px;
    color: black;
    font-size: 16px;
    text-align: left;
    border-radius: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
.sort-title:hover {
    background-color: rgba(0, 0, 0, 0) !important;
    color: black !important;
/* el-container 的设置  */
.sort-list-container {
    width: 100%;
    height: 100%; /* 高度设置为100%才能让el-main出现垂直滚动条 */
    padding-bottom: 10px;
    overflow-x: hidden;
.sort-list-main {
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: auto;
    overflow-x: hidden;
/* 课程分类的下拉菜单 end */
</style>
<script>
  export default {
  	data() {
	    return {
			list: [
			        id: 1001,
			        name: '计算机'
			        id: 1002,
			        name: '医药'
			        id: 1003,
			        name: '会计专业'
			        id: 1004,
			        name: '文学文化'
			        id: 1005,
			        name: '经济学'
			        id: 1006,
			        name: '理学'
			        id: 1007,
			        name: '外语'
    methods: {
		 * 点击下拉菜单的分类选项
		 * @param e command元素
		handleCommandSort: function (e) {
			console.log(e);
			console.log(list[e]);
</script>
在用 el-dropdown 的时候，不知道为什么一个页面中的某个 dropdown 的间距过大，其他的都很正常，所以需要 调整许多 el-dropdown 中一个的样式。
但 ElementUI 会有自己的样式，他绑定的 id 会动态变化，每个 el 标签的类名也是一致的。
看了其他博主的解法，说 >>> 和 /deep/ 快被废弃了，说不建议使用，也不知道真假。
方法一：在整个 el 标签的外层加上一个 div ，在 div 上加上类名来选中？(我失败了)
<div c
  </span>
  <el-dropdown-menu slot="dropdown" class="header-new-drop">
    <el-dropdown-item>菜单1</el-dropdown-item>
    <el-d
				Vue使用ElementUI的el-dropdown点击事件问题el-dropdown介绍问题重述问题解决后续
el-dropdown介绍
el-dropdown是ElementUI提供的响应式的实现下拉菜单的功能组件。详细用法可见官方说明文档：https://element.eleme.cn/#/zh-CN/component/dropdown
我在实现下拉菜单的时候，在el-dropdown-item添加点击事件发现定义的事件无法被正常触发。
下面是我的代码：
<el-dropdown&
				el-dropdown的command事件默认传递一个参数，即每个下拉选项el-dropdown-item中设定的command的值，那么如何传递多个参数呢？
实现方法：动态设置el-dropdown-item中的command值
1. HTML部分
<el-dropdown size="mini" split-button @click="handleClickDropDown('design', formItem)" @command="changeItem">
最近写vue 发现公司一个项目有显示问题 搞的我很头疼 (如图)
我点击的是最下面()红框的下拉按钮  结果下拉菜单显示到上面去了,但是滚动后或者双击或者f12就是正常显示    本人也是查阅大堆资料, 感觉其他人没有遇到过这个问题 …
试过很多解决办法 清缓存 组件加key  点击时让滚动条滚动 点击时触发双击 等等 … 治标不治本
后来灵光一闪就解决了
下面贴下我的解决步骤
1 首先将官网Dropdown 的实例代码原封不动贴到 项目 发现还是
				1.项目中遇到点击页面中其他的地方关闭窗口，但是遇到一个问题el-dropdown元素是写在body里面
2.因此点击el-dropdown的下拉框时窗口就关闭了
所以我们需要把它写在窗口的div里面，在这里用到一个方法
<template>
        <el-dropdown>
            <span class="el-dropdown-link">
                下拉菜单<i clas
					<div v-else>           <el-badge class="badge" :value="unread.length" :max="10" style="cursor: pointer" @click="clickRead">             <el-icon style="color: #666" size="25"><Bell /></el-icon>           </el-badge>           <span style="margin-right: 5px; color: steelblue">欢迎您，{{ user.name }}</span>           <el-dropdown>             <el-avatar :size="40" :src="user.avatar" style="margin-top: 10px" />             <template #dropdown>               <el-dropdown-menu>                 <el-dropdown-item><div @click="router.push('/front/dynamic')">我的动态</div></el-dropdown-item>                 <el-dropdown-item><div @click="router.push('/front/collect')">我的收藏</div></el-dropdown-item>                 <el-dropdown-item><div @click="router.push('/front/address')">我的收货地址</div></el-dropdown-item>                 <el-dropdown-item><div @click="router.push('/front/person')">个人信息</div></el-dropdown-item>                 <el-dropdown-item><div @click="router.push('/front/password')">修改密码</div></el-dropdown-item>                 <el-dropdown-item><div @click="logout">退出登录</div></el-dropdown-item>               </el-dropdown-menu>             </template>           </el-dropdown>         </div>
				这是一个 Vue.js 组件，包含了用户登录后的界面，其中包括一个带有数字标记的消息提醒图标，显示当前用户的用户名，并提供了一个下拉菜单。下拉菜单中包含了用户的个人信息、动态、收藏、收货地址、修改密码和退出登录等选项。具体实现细节如下：
- 使用 v-else 指令，当用户已登录时，显示该 div 元素。
- 使用 ElementUI 的 el-badge 组件，用于显示消息提醒图标，并根据未读消息数量进行标记。
- 使用 ElementUI 的 el-icon 组件，用于显示消息提醒图标中的图标，这里使用了一个名为 Bell 的组件。
- 使用 ElementUI 的 el-dropdown 组件，用于实现下拉菜单。
- 使用 ElementUI 的 el-avatar 组件，用于显示用户头像。
- 使用 ElementUI 的 el-dropdown-menu 组件，用于实现下拉菜单的选项。
- 通过 @click 事件监听器，实现了下拉菜单选项的点击事件，根据用户的选择跳转到对应的路由或执行对应的操作。