关于element:element的下拉菜单Dropdown级联做法

53次阅读

共计 1096 个字符,预计需要花费 3 分钟才能阅读完成。

官网提供的文档只提供了一层

看到正好有敌人问 Dropdown 如何做级联
当初把代码贴到上面
三联四联做法统一

  <el-dropdown trigger='click' :hide-on-click='false'>
      <span class="el-dropdown-link">
        <el-link type="primary" style='margin-left:10px;'>{{title}}</el-link>
    <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
      </span>
      <el-dropdown-menu slot="dropdown">
        <template  v-for="item in menu">
          <el-dropdown-item v-if='!item.childer'>{{item.title}}</el-dropdown-item>
          <el-dropdown-item v-else>
            <el-dropdown placement='right-start'  >
              <span class="el-dropdown-link">
                {{item.title}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template v-for='items in item.childer'>
                  <el-dropdown-item>{{items.title}}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>

          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
menu : [
      {
        title : "分类",
        url : "",
        childer :[
          {
            title : '分类 1',
            url : '1111'
          },
          {
            title : '分类 2',
            url : '2222'
          },
          {
            title : '分类 3',
            url : '3333'
          }
        ]
      },
      {
        title : "我的",
        url : "",
        childer :[
          {
            title : '集体核心',
            url : 'b1111'
          },
          {
            title : '我的订单',
            url : 'b2222'
          },
          {
            title : '购物车',
            url : 'b3333'
          },
          {
            title : '零钱',
            url : 'b4444'
          },
          {
            title : '账户平安',
            url : 'b5555'
          }
        ]
      },
      {
        title : '首页',
        url : 'https://segmentfault.com/'
      }
    ]

正文完
 0