vue3+elementPlus侧边栏折叠时，选中的按钮显示，其余的按钮隐藏

在Vue 3和Element Plus中，可以使用v-show指令来实现侧边栏折叠时的按钮显示和隐藏。

首先，假设你有一个侧边栏组件Sidebar，其中包含多个按钮。你可以在侧边栏组件中定义一个data属性来标识当前是否折叠，例如isCollapsed：

<template>
  <div class="sidebar" :class="{ collapsed: isCollapsed }">
    <button v-show="!isCollapsed">按钮1</button>
    <button v-show="!isCollapsed">按钮2</button>
    <button v-show="!isCollapsed">按钮3</button>
    <button v-show="!isCollapsed">按钮4</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false, // 默认不折叠
    };
  },
};
</script>

<style>
.sidebar.collapsed button {
  display: none; // 折叠时隐藏按钮
}
</style>

在上面的代码中，使用v-show指令来根据isCollapsed的值控制按钮的显示和隐藏。如果isCollapsed为true，则按钮将被隐藏。当isCollapsed为false时，按钮会显示出来。

此外，通过添加一个.collapsed类来设置折叠时按钮的样式，将display属性设置为none，使其隐藏。

在父组件中，你可以通过修改isCollapsed属性的值来控制侧边栏的折叠状态。例如，你可以在点击折叠按钮时触发一个方法来切换isCollapsed的值：

<template>
  <div>
    <button @click="toggleSidebar">折叠/展开侧边栏</button>
    <sidebar></sidebar>
  </div>
</template>

<script>
import Sidebar from './Sidebar.vue';

export default {
  components: {
    Sidebar,
  },
  methods: {
    toggleSidebar() {
      this.$refs.sidebar.isCollapsed = !this.$refs.sidebar.isCollapsed;
    },
  },
};
</script>

在上面的代码中，通过使用$refs来获取子组件Sidebar的实例，并修改其isCollapsed属性的值，从而实现折叠和展开的效果。

这样，当侧边栏折叠时，选中的按钮将显示，其余按钮将隐藏。