element NavMenu 高度 el dialog高度

转载

mob64ca140b82e3 2024-04-19 22:11:07

文章标签 element NavMenu 高度 css vue.js 前端自适应高度 文章分类 机器学习人工智能

缩放浏览器，表格+分页依旧正常展示，如下图所示：

element NavMenu 高度 el dialog高度_自适应高度

element NavMenu 高度 el dialog高度_前端_02

图片中涉及到左侧的dg-table（封装过的el-table）、右侧的el-table 两种类型的样式设置

由于本篇是使用了position定位来处理的，所以先要了解：

Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动简单的定位实现过程

给想要自适应高度的div设置position:absolute;top:0;left:0;right:0;bottom:0;(具体距离设置看情况设定)

.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}

二、我对代码进行的修改

html 那个按钮为什么要用el-form，讲真的我也不知道别人为啥那样写

element NavMenu 高度 el dialog高度_vue.js_03

css样式修改

1.先给弹框dialog设置一个定位

element NavMenu 高度 el dialog高度_css_04

2.给里面的dg-table+el-table设置定位
(可能有冗余代码，但是目前弄出来就行了)

<style lang="less" scoped>
.dialogBox {
  height: 100% !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.dialog-content {
  flex: 1;
  // width: 100%;
  // height: 80%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: 51px;
  bottom: 0;
  right: 0;
  padding: 0 6px;
  z-index: 1;
  overflow: hidden;
  // overflow-y: auto;
}
.dialog-content-left {
  flex: 1;
  // width: 48%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
::v-deep.dgTable > div:nth-child(2) {
  height: calc(100% - 50px);
  overflow: hidden;
}
.dgTable {
  height: calc(100% - 55px);
  position: relative;
}
::v-deep.dgTable .el-table--fit {
  height: calc(100% - 55px);
  position: relative;
  width: auto;
  height: 100%;
  overflow: hidden;
  overflow-x: auto;
}
::v-deep.dgTable .el-table__body-wrapper {
  position: absolute;
  left: 0;
  top: 54px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  // overflow: hidden;
  overflow-y: auto;
}
.dgTable > .el-table__body-wrapper {
  /* overflow: hidden; */
  position: absolute;
  top: 41px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  /* height: 100%; */
  overflow: hidden;
  width: 100%;
  // overflow-y: auto;
}
.pagination {
  position: absolute;
  bottom: 4px;
  width: 100%;
  text-align: right;
  margin: 0;
  margin-bottom: 10px;
}
.dialog-content-right {
  flex: 1;
  // width: 48%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.rightTable {
  height: calc(100% - 55px);
  position: relative;
}

::v-deep.el-table--scrollable-x .el-table__body-wrapper {
  height: calc(100% - 62px);
  // position: relative;
  width: auto;
  // height: 100%;
  overflow: auto;
}
.rightTable {
  /deep/ .el-table__body-wrapper {
    height: calc(100% - 62px); // 一个是正常表格项固定高度，自己设
    overflow-y: auto;
    z-index: 1;
  }
  /deep/.el-table__fixed-body-wrapper {
    height: calc(100% - 62px); // 一个是固定列表格项固定高度，自己设
    overflow-y: auto;
    pointer-events: none; // 禁止左侧固定列滑动
    cursor: default;
  }
}

.rightTable > .el-table--border {
  height: 100%;
}
.block {
  position: absolute;
  bottom: 4px;
  width: 100%;
  text-align: right;
  margin: 0;
  margin-bottom: 10px;
}
// 暂无数据-可视化区域内居中
.rightTable/deep/ .el-table__empty-block {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding-right: 100%;
}
</style>

重点是要top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域