elementui table 在浏览器分辨率变化的时候界面异常

文章讲述了作者在处理网页界面中表格显示异常的问题时,尝试了监听resize事件并调用doLayout方法,但效果不稳定。最终通过调整CSS样式,将aside定宽并使用calc计算main的宽度,解决了表格宽度随浏览器缩放动态调整且无卡顿的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

异常点:

  1. 界面显示不完整,
  2. 表格卡顿,界面已经刷新完成,但是表格的宽度还在一点一点变化,甚至有无线延伸的情况

思路:

 1. 使用doLayout

这里官方文档有说明,

所以我的想法是,监听浏览器的resize事件,然后执行doLayout 方法。

结果是:

偶尔可以解决,偶尔又出现了,,,四舍五入等于没解决

 2. 调整css 样式

是的,没错,调整css样式就可以。

重点就是在我们如何实现以上这种样式。

我最开始的方案是aside 定宽,main则使用flex:1 的方式。(这种方式就会出现上面所说的异常点)

所以我试着进行了调整:

在父级添加 width: 100% 时,aside 定宽不变,但是对于main 则改用calc: (100% - 定宽)。

效果惊人的好,此时无论如何调整浏览器分辨率,el-table 都可以正常显示,且没有出现卡顿的情况。

.box{
  width: 100%;
  .aside{
    width: 240px;
  }
  .main{
    width: calc(100% - 240px);
    margin: 0 10px;
  }
}

ElementUItable 组件是一个基于 Vue.js 的表格组件,它提供了丰富的功能和属性,使得在 Vue.js 项目中使用表格变得非常简单。以下是关于 ElementUI table 的一些常用属性和方法: 1. 常用属性: - `:data`:用于绑定表格的数据源。 - `:columns`:用于定义表格的列信息。 - `:options`:用于配置表格的选项,如分页、搜索等。 2. 通过 v-for 封装适⽤性更好的表格: 可以使用 v-for 指令来循环渲染表格的列,这样可以更灵活地定义表格的列信息。示例代码如下: ```html <el-table :data="tableData"> <el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val"></el-table-column> </el-table> ``` 3. 插槽域(slot-scope): 在表格中使用插槽时,可以通过 slot-scope 获取到当前行的数据和其他相关信息。示例代码如下: ```html <el-table :data="tableData"> <el-table-column> <template slot-scope="scope"> {{ scope.row.name }} - {{ scope.row.age }} </template> </el-table-column> </el-table> ``` 4. Vue+ElementUI table 表格分页: ElementUItable 组件支持前端分页和后端分页两种方式。前端分页是在前端将数据分成多个页面,用户在浏览时只加载当前页面的数据;后端分页是将数据分成多个页面,用户在请求时一次性获取所有页面的数据。两种方式各有优缺点,可以根据实际需求选择合适的分页方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值