el-table表格宽度自适应

html 复制代码
<template>
  <div class="box">
    <div class="box_item1"> box1</div>
    <div class="box_item2">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <div class="box_item3">box3</div>
  </div>
</template>
css 复制代码
.box {
  width: 100%;
  display: flex;
  flex-wrap:nowrap;
  align-items: flex-start;
  .box_item1,
  .box_item3 {
    flex: 1;
    background: #000;
    color: #ccc;
    margin: 10px;
  }
  .box_item2 {
    flex: 1;
    // min-height: 0;
    overflow: hidden; // 重点:在el-table的外层盒子设置
  }
}
相关推荐
samuel9188 分钟前
axios取消重复请求
前端·javascript·vue.js
苹果酱056714 分钟前
Golang标准库——runtime
java·vue.js·spring boot·mysql·课程设计
滿18 分钟前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧29 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快37 分钟前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
好_快40 分钟前
Lodash源码阅读-baseToString
前端·javascript·源码阅读
好_快40 分钟前
Lodash源码阅读-initCloneByTag
前端·javascript·源码阅读
好_快44 分钟前
Lodash源码阅读-cloneSymbol
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-cloneRegExp
前端·javascript·源码阅读
帅帅哥的兜兜2 小时前
react中hooks使用
前端·javascript·react.js