element的table组件在flex布局下宽度不能自适应

【问题描述】

在做数据管理系统的时候,使用了flex布局,element的table组件,但是flex布局下element的table组件宽度为页面一加载时的宽度。浏览器窗口变大,table组件跟着变大,但是当浏览器窗口变小的时候table组件的宽度还是原来的宽度,并没有随窗口自适应。

【原因】

element 内部的table宽度计算是根据父级元素来的。当时flex布局时,嵌套的子元素有一个是固定宽度且大于外层父级元素的伸缩宽度时,那么素有的嵌套元素都不会继续缩放了。

【解决方案】

通过给目标元素添加绝对定位,让其从原来的flex布局下的嵌套关系中脱离出来,在根据需要给他添加一个相对定位的父元素,将其布局在需要的位置。

参考文献

blog.csdn.net/qq_19694913…

原文链接:juejin.im

上一篇:提高效率小技巧:自定义终端命令或脚本文件
下一篇:eventBus实现对象之间通信

相关推荐

  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    25 天前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    2 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

    1 年前
  • 重温 Flex 布局

    介绍 这是关于 Flex 布局的实践,原想还水一点字数来介绍 Flex 相关属性,想想还是算了,阮一峰大佬的两篇文章推上: Flex 布局教程:语法篇 Flex 布局教程:实例篇 如何用 CSS ...

    2 年前
  • 重新学习 flex-grow、flex-shrink、flex-basis

    本文要点: flex 布局中,flex 设置单、双、三值的时候分别有什么意义。 flex 布局怎么压缩负空间(flex-shrink) flex 布局怎么分配多余的空间(flex-grow) fle...

    6 个月前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    5 个月前
  • 踩坑记之基于Vue+Element+Koa实现云上存储

    前言最近在做项目等时候,需要处理图片,表格,文本等多种格式的文件到数据库,用传统等方法进行处理既繁琐又比较麻烦,所以第一次尝试使用云上存储等方式来实现。比较了阿里云和腾讯云之类的网站之后,最终选择七牛...

    5 个月前
  • 跟随Element学习Vue小技巧(9)——Radio(下)

    ❝ 我一直都想证明 努力是能够超越天才的 ❞ 前言 我想要杯拿铁您要的是这个吗?额,这个中杯对不起先生,这个是大杯,这个才是中杯你这不是大、中、小三个杯子吗?我要这个中杯对不起先生,那个是大杯...

    2 个月前

官方社区

扫码加入 JavaScript 社区