vue element admin修改navbar，独占一行

<template>

  <div :class="classObj" class="app-wrapper">

    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />

    <div class="fixed-header">

        <el-row>

  <el-col :span="24">

    <navbar></navbar>

  </el-col>

</el-row>

      </div>

    <div class="main-container">

      <div style="height: 60px;"></div>

        <sidebar class="sidebar-container" :style="{ width: barWidth }"  />

      <app-main />

    </div>

  </div>

</template>

<script>

import { Navbar, Sidebar, AppMain, } from './components'

import ResizeMixin from './mixin/ResizeHandler'

export default {

  name: 'Layout',

  components: {

    Navbar,

    Sidebar,

    AppMain,

  },

  mixins: [ResizeMixin],

  computed: {

    sidebar() {

      return this.$store.state.app.sidebar

    },

    device() {

      return this.$store.state.app.device

    },

    fixedHeader() {

      return this.$store.state.settings.fixedHeader

    },

    classObj() {

      return {

        hideSidebar: !this.sidebar.opened,

        openSidebar: this.sidebar.opened,

        withoutAnimation: this.sidebar.withoutAnimation,

        mobile: this.device === 'mobile'

      }

    }

  },

  methods: {

    handleClickOutside() {

      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

    }

  }

}

</script>

<style lang="scss" scoped>

  @import "~@/styles/mixin.scss";

  @import "~@/styles/variables.scss";

  .app-wrapper {

    @include clearfix;

    position: relative;

    height: 100%;

    width: 100%;

    &.mobile.openSidebar{

      position: fixed;

      top: 0;

    }

  }

  .drawer-bg {

    background: #000;

    opacity: 0.3;

    width: 100%;

    top: 0;

    height: 100%;

    position: absolute;

    z-index: 999;

  }

  .fixed-header {

    position: fixed;

    top: 0;

    right: 0;

    z-index: 9;

    width: 100%;

    transition: width 0.28s;

  }

  .hideSidebar .fixed-header {

    width: calc(100% - 54px)

  }

  .mobile .fixed-header {

    width: 100%;

  }

</style>

之后控制sidebar展开控制：

//找到store/modules/app.js文件

const app = {

  state: {

    sidebar: {

      // opened: !+Cookies.get('sidebarStatus'),        //原值

      opened:true,                                      //默认展开（false是隐藏）

      withoutAnimation: false

    },

    device: 'desktop',

    language: Cookies.get('language') || 'en',

    size: Cookies.get('size') || 'medium'

  },

  mutations: {

    TOGGLE_SIDEBAR: state => {            //点击收缩功能触发

      // if (state.sidebar.opened) {

      //   Cookies.set('sidebarStatus', 1)

      // } else {

      //   Cookies.set('sidebarStatus', 0)

      // }

      // state.sidebar.opened = !state.sidebar.opened

      state.sidebar.opened = true

      state.sidebar.withoutAnimation = false

    },

    CLOSE_SIDEBAR: (state, withoutAnimation) => {        //自适应触发

      Cookies.set('sidebarStatus',1)

      state.sidebar.opened = true

      state.sidebar.withoutAnimation = withoutAnimation

    }

    //......后面的就不展示了

}