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的外层盒子设置
  }
}
相关推荐
古一|21 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda721 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
熊猫钓鱼>_>1 天前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
敲敲敲敲暴你脑袋1 天前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
JYeontu1 天前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_1 天前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放1 天前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
国家不保护废物1 天前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊1 天前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
二十雨辰1 天前
eduAi-智能体创意平台
前端·vue.js