vue使用element元件實現選單的摺疊與展開

1.實現效果

1.未摺疊時

2.摺疊後

2. 程式碼

• template

<el-container>
  <!--側邊欄-->
  <!--側邊欄選單區-->
  <el-aside :width="isCollapse ? '64px' : '200px' ">
    <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409Eff"
      :collapse="isCollapse"	//給Collapse動態賦值
      :collapse-transition="false"
      >
    </el-menu>
  </el-aside>
</el-container>

• script

data(){
	return{
	  isCollapse:false,
	}
}
methods:{
  //點選按鈕摺疊選單
  toggleCollapse(){
    this.isCollapse = !this.isCollapse;	//點選摺疊按鈕後，對isCollapse進行取反
  }
},

說明

• collapse:element NavMenu 導航選單元件的一個能讓選單摺疊或收起的屬性

  • 預設為false，為true時可摺疊

• :width="isCollapse ? '64px' : '200px' "表示：如果isCollapse值為false，寬度為200px；若isCollapse值為true，寬度為64px