1

官网提供的文档只提供了一层
image.png

看到正好有朋友问Dropdown如何做级联
现在把代码贴到下面
三联四联做法一致
image.png

  <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/'
      }
    ]

一碗vue面
1 声望0 粉丝