问题描述

在做数据管理系统的时候，使用了flex布局，element的table组件，但是flex布局下element的table组件宽度为页面一加载时的宽度。浏览器窗口变大，table组件跟着变大，但是当浏览器窗口变小的时候table组件的宽度还是原来的宽度，并没有随窗口自适应，（这点我也搞不懂是怎么回事，窗口变大，它能自适应变大，窗口变小，就不能自适应变小了~~~）

先看一下没有跟随窗口变小宽度自适应的效果

tableNoAtuo.gif

这是解决之后的效果

tableAtuo.gif

解决办法

1. 先看一下我的代码结构

//html
<div class="module-result-content">
    <div class="result-content" ref="tableContainer">
        <el-table
          id="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :height="tableMaxHeight"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :width="item.width?item.width:''"
            v-for="(item,index) in tableHead"
            :key="index"
            :show-overflow-tooltip="item.showTooltip?item.showTooltip:''"
          ></el-table-column>
      </el-table>
 </div>

//scss
.module-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .result-content {
     flex: 1;
      .el-table{
        width:100% //不起作用
      }
    }
}

下面是解决代码

//scss
.module-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .result-content {
     flex: 1;
     position:relative;
      .el-table{
        position:absolute;
        width:100% //可以不加
      }
    }
}

看懂了吗？只要多加两行代码，我们常用的定位，就可以解决这个问题，这是在一片文章中看到的，原文链接，有兴趣的可以去看看，重点就是嵌套的层级一定要清晰，继承一定要明确。100%到底继承谁的