flex布局子元素el-table宽度无限增加解决办法

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>