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

上代码

<template>
  <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"
              :key="index"
              class="sort-item"
              :command="index"
            >
              <span v-text="item.name"></span>
            </el-dropdown-item>
          </el-main>
        </el-container>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>


<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(this.list[e])
      },
    },
  }
</script>


<style>
  /* 课程分类的下拉菜单 start */
  /* 设置最外层的div */
  .sort {
    display: inline-flex;
    width: 50%;
    height: 100%;
    margin-left: 40px;
    justify-content: flex-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>

来自https://blog.csdn.net/weixin_40469224/article/details/106001423?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-106001423-blog-111635195.pc_relevant_multi_platform_featuressortv2dupreplace&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-106001423-blog-111635195.pc_relevant_multi_platform_featuressortv2dupreplace&utm_relevant_index=2