首頁布局如下

要求點(diǎn)擊按鈕,將側(cè)邊欄收縮,

通過 row 和 col 組件，并通過 col 組件的 span 屬性我們就可以自由地組合布局。

methods: {
    // 點(diǎn)擊按鈕，切換菜單的折疊與展開
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
}

側(cè)邊欄代碼

 <!-- //側(cè)邊欄 -->
      <el-col :span="isCollapse ? 1 : 3" style="height: 100vh !important">
        <div class="title-text">
          <span>
            <span v-show="!isCollapse">xxxxxx系統(tǒng)</span>
            <span v-show="isCollapse">
              <i class="el-icon-s-fold"></i>
            </span>
          </span>
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          :default-active="this.$route.path"
          router
          text-color="#fff"
          :collapse="isCollapse"
          :unique-opened="true"
        >
          <el-menu-item key="1" index="/home/homepage">
            <i class="el-icon-menu"></i>
            <span slot="title">xxxx</span>
          </el-menu-item>

          <el-submenu index="subCompany">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">xxxx</span>
            </template>

            <el-menu-item-group>
              <el-submenu
                v-for="(item, index) in menuList"
                :index="'' + index"
                :key="index"
              >
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.company_name }}</span>
                </template>

                <el-menu-item
                  v-for="(subItem, index) in item.refuel_station_list"
                  :key="index"
                >
                  <span>{{subItem.station_name}}</span>
                </el-menu-item>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>

data(){
  return{
    //側(cè)邊欄信息
      menuList: [
        {
          id: 0,
          authName: "xxxx",
          children: [
            { authName: "xxx",id: 1,path: "xxx",parentid: 0,},
            { authName: "xxxx", id: 2, path: "xxxx", parentid: 0 },
          ],
        },
        {
          id: 1,
          authName: "yy",
          children: [
            { authName: "yyy", id: 1, path: "yyy", parentid: 1 },
            { authName: "yyyy", id: 2, path: "yyyy", parentid: 1 },
          ],
        },
        {
          id: 2,
          authName: "zz",
          children: [
            { authName: "zzz",id: 1,path: "zzz",parentid: 2 },
            { authName: "zzzz", id: 2, path: "zzzz", parentid: 2 },
            { authName: "zzzzz", id: 3, path: "zzzzz", parentid: 2 },
            { authName: "zzzzzz", id: 4, path: "zzzzzz", parentid: 2 },
          ],
        },
      ],
  }

}

?效果

補(bǔ)充路由:

?文章來源地址http://www.zghlxwxcb.cn/news/detail-502253.html

?

到了這里，關(guān)于vue + element ui 實(shí)現(xiàn)側(cè)邊欄導(dǎo)航欄折疊收起的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！