Vue+ElementUI side menu bar to modify the size, retain the folding effect

Problem: The side menu bar has many levels, and the submenu is indented, so if the submenu is too long, it will be blocked. Solution: Using the trisomes, modify the style according to the TF value of the sidebarFold, preserving the effect of the fold. Ps: folding effect

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;" </el-radio-button :label="false"> </el-radio-button :label="true"> </el-radio-button :label="true"> </el-radio-group>Copy the code

< el - submenu... :style="{'min-width': (sidebarFold == true ? '64px':'224px')}">
</el-submenu>
<el-menu-item...:style="{'min-width': (sidebarFold == true ? '64px':'224px')}">
  </el-menu-item>
  
<script>
export default {
  data () {
    return {
      sidebarFold: this.$store.state.sidebarFold
    }
}
</script>
Copy the code