The problem background

Page vertical layout, from top to bottom is divided into four areas, two areas of a certain height, the height of the two areas of the rise and fall.

When the query condition expands or contracts, the list changes highly dynamically.

Implementation strategy

When the condition panel is expanded or contracted, get the height of the expanded or contracted panel to calculate the height of the list area.

  /** * The search criteria panel expands or contracts. * /
  togglePanel() {
    this.queryShrink = !this.queryShrink;
    this.$nextTick(() = > {
      const tableHeader: any = this.$parent.$refs.tableHeader;
      const tableQuerys: any = this.$parent.$refs.tableQuerys;
      const tableAction: any = this.$parent.$refs.tableAction;
      const containers: any = this.$parent.$refs.containers;
      const parent: any = this.$parent.$el;
      const headerHeight = tableHeader.$el.offsetHeight;
      const querysHeight = tableQuerys.$el.offsetHeight;
      const actionHeight = tableAction.$el.offsetHeight;
      const parentHeight = parent && parent.offsetHeight;
      const resetHeight = parentHeight - headerHeight - querysHeight - actionHeight;
      containers.style.height = resetHeight + 'px';
      console.log('containers: ', resetHeight + 'px');
    });
  }
Copy the code