vue弹性布局页面

注：该文章中的参考代码仅解决目录中的问题，不代表仅使用文章中的代码就能够100%实现下图样式

页面完成样式：

1、flex弹性布局页面

flex弹性布局页面：随着左侧宽度的改变，右侧宽度自适应，使用flex布局子元素flex-grow：1

flex自适应布局：flex自适应布局
flex-grow：作用：定义子项目分配剩余空间，需要主轴存在剩余空间（默认为0）；属性值：0（默认，保持初始），正数n（放大因子，占据剩余空间份数）

<div class="content-box">
	<div class="left-box"></div>
	<div class="right-box"></div>
</div>
...
<style lang="less">
.content-box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    .left-box{
    	width: 374px;
    	height:100%;
    }
    .right-box{
    	width: 374px;
    	height:100%;
    	flex-grow: 1;
    }
}
</style>
	

2、左侧菜单栏移出移入动画

使用transition动画实现左侧移出移入

transition动画相关知识： transition动画相关知识

<div class="content-box">
	<div class="left-box" :class="{left-box1:drawer}">
		//新增button
		<div class="button" :class="{button1:drawer}"  @click="drawer=!drawer" >
		</div>
	</div>
	<div class="right-box"></div>
</div>
<script>
...
	data(){
		return{
			drawer:false;
		}
	}
...
</script>
<style lang="less">
.content-box{
    ...
    //添加新属性
    overflow: hidden;
    .left-box{
    	transition: margin-left .2s ,opacity .2s;
    	 //添加新class
    	.button{
			width: 21px;
			height: 61px;
			background:blue;
			position: absolute;
			top: 405px;
			transition: left .3s;
			z-index: 9999;
			left: 41px;
			transform: rotateY(180deg);
    	}
    	.button1{
			left: 404px;
			transform: rotateY(0deg);
		}
    }
    //添加新class
    .left-box1{
	    margin-left:-374px;
	    opacity: 0;
    }
}
</style>

3、element-ui表格自适应

右侧内容自适应可采用百分比布局，下方表格使用element-ui组件，可通过添加==style=“position:absolute;width: 100%”==实现表格自适应

 <el-table
     class="table mar-top-20"
     border
     height="250"
     style="position:absolute;width: 100%"></el-table>