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