antdvue 侧边栏的折叠

1.方法一

使用组件自带的方法  在 a-layout-sider 标签上增加一个 collapsible 即可

<a-layout-sider width="200" style="background: #fff"  collapsible>

侧边栏最下方会出现按钮 点击后可将侧边栏收起

 

2.方法二

设置一个按钮 在定义一个布尔值false  绑定给按钮 再定义一个方法 点击后变为true

<a-button type="link" style="margin-bottom: 16px" @click="toggleCollapsed">
     <MenuUnfoldOutlined v-if="collapsed" />
     <MenuFoldOutlined v-else />
</a-button>

data() {
        return {
            collapsed:false
        }
    },
    methods: {
        toggleCollapsed() {
            this.collapsed = !this.collapsed;
        }

    }

设置之后会在侧边栏上方出现一个按钮 点击后会将侧边栏收起