改造ElementUI中的el-dropdown下拉菜单

改造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>