合肥市城乡建设局2019网站,安仁网站制作,如何备份网站程序,12333网上服务大厅功能描述#xff1a;
有两个模块#xff0c;点击上面模块的收起按钮时#xff0c;上面的模块可以折叠#xff0c;下面的模块随之扩展 代码实现#xff1a;
我们在 Vue 组件中定义两个模块的布局和状态管理#xff1a;
const scrollTableY ref(560); // 表格初始高度…
功能描述
有两个模块点击上面模块的收起按钮时上面的模块可以折叠下面的模块随之扩展 代码实现
我们在 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-ifisQuFold:row-selection{ type: check }idleft-table:scroll{ y: scrollTableY }:isPaginationtruev-bindgridConfig/action-table
