flex布局子元素el-table宽度无限增加解决办法 — vue技术交流群(864583465)
假设你的页面布局是这样的:左侧固定宽度,右侧自适应宽度,只需要给el-table的外层(可以是父级,也可以是爷爷级)css添加min-width:0;
即可。
核心思想:一定要是el-table的外层元素,可以是父级,或者是父级的父级等
废话不多说,直接上代码
<template>
<div class="table-width">
<div class="left">
菜单等
</div>
<div class="right">
<el-table
:data="tableData"
style="width: 100%;">
<el-table-column prop="date" label="日期" min-width="180"/>
<el-table-column prop="name" label="姓名" min-width="180"/>
<el-table-column prop="address" label="地址" min-width="180"/>
<el-table-column prop="date" label="日期" min-width="180"/>
<el-table-column prop="name" label="姓名" min-width="180"/>
<el-table-column prop="address" label="地址" min-width="180"/>
<el-table-column prop="date" label="日期" min-width="180"/>
<el-table-column prop="name" label="姓名" min-width="180"/>
<el-table-column prop="address" label="地址" min-width="180"/>
</el-table>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
private num: number = 123
private tableData = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
</script>
<style lang="scss">
.table-width {
display: flex;
height: 400px;
.left {
flex-shrink: 0;
width: 200px;
border-right: 1px solid #dedede;
}
.right {
box-sizing: border-box;
flex: 1;
min-width: 0; // 关键代码
padding: 15px;
}
}
</style>