使用 Vue 和 Ant Design 实现抽屉效果的模块折叠功能

功能描述：

有两个模块，点击上面模块的收起按钮时，上面的模块可以折叠，下面的模块随之扩展

代码实现：

我们在 Vue 组件中定义两个模块的布局和状态管理：

const scrollTableY = ref(560);  // 表格初始高度
const isRaFold = ref(false);    // 控制第一个模块折叠状态
const isQuFold = ref(true);     // 控制第二个模块显示状态const items = ref([{x: 0,y: 0,w: 100,h: 26,key: 'rightTop',title: '分文信息',cardProps: {bodyStyle: {padding: '12px',},},},{x: 0,y: 26,w: 100,h: 74,key: 'rightBottom',title: '查询结果列表',cardProps: {bodyStyle: {padding: '12px',},},},
]);const handleFoldClick = (type) => {if (type == 1) {isRaFold.value = !isRaFold.value;//调整第一个模块的高度items.value[type - 1].h = isRaFold.value ? 26 : 6;//调整第二个模块的位置和高度items.value[type].y = items.value[type - 1].h;items.value[type].h = 100 - items.value[type - 1].h;} else if (type == 2) {isQuFold.value = !isQuFold.value;}
//调整表格的高度scrollTableY.value = isRaFold.value ? 560 : 730;
};

接下来，在模板中使用 v-if 指令控制模块的显示

 <action-tablev-if="isQuFold":row-selection="{ type: 'check' }"id="left-table":scroll="{ y: scrollTableY }":isPagination="true"v-bind="gridConfig"></action-table>