怎么实现表格全屏和退出全屏

Question

怎么实现表格全屏和退出全屏

如图所示，每个表格都有一个全屏按钮 但是我怎么才能实现点击让表格部分占满整个大的红框呢，
其中 表格的东西 包括表头 表格都是组件组成的

Answer 1

ElementUI的话，应该把其他组件隐藏，然后修改需要全屏组件的宽高即可。比如下面这样，修改table的高度。

  <el-table
            ref="table"
            style="width: 100%"
            :max-height="maxHeight"
            min-height="300px"
          >

 //添加全屏按钮
    handleFullScreen() {
      this.fullscreenFlag = !this.fullscreenFlag;
      if (this.fullscreenFlag) {
        //全屏时修改表格的高度
        this.maxHeight=
          this.$refs.table.$parent.$el.clientHeight - 155;
      } else {
        this.planNumHeight = 400;
      }
    },

或者还可以提供一个思路，点击全屏的时候，默认打开一个全屏的dialog，在新打开的dialog中写入需要全屏的组件。