问题描述
在做数据管理系统的时候，使用了flex布局，element的table组件，但是flex布局下element的table组件宽度为页面一加载时的宽度。浏览器窗口变大，table组件跟着变大，但是当浏览器窗口变小的时候table组件的宽度还是原来的宽度，并没有随窗口自适应，（这点我也搞不懂是怎么回事，窗口变大，它能自适应变大，窗口变小，就不能自适应变小了~~~）
先看一下没有跟随窗口变小宽度自适应的效果
tableNoAtuo.gif
这是解决之后的效果
tableAtuo.gif
解决办法
- 先看一下我的代码结构
//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% //可以不加
}
}
}
