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的外层盒子设置
  }
}
相关推荐
Red Car5 分钟前
javascript 性能优化实例一则
开发语言·javascript·ecmascript
艾小码10 分钟前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
千叶寻-1 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
記億揺晃着的那天8 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing9 小时前
ByteDance——jy真题
前端·javascript·面试
真的想不出名儿9 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
阳光阴郁大boy9 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
sorryhc10 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy10 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq10 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js