element-ui table组件适应性问题(横向滚动条)

举报
SHQ5785 发表于 2023/02/10 09:00:42 2023/02/10
【摘要】 一、前言在前端项目开发过程中,解决适配性、兼容性问题是经常遇到且费事费力的苦差事,尤其是在开发Vue项目,应用部署在IE(尤其是IE9)上的时候。在进行动态展示(根据后台返回的表头、表数据展示)搜索结果时,会遇到搜索结果适配屏幕宽度或高度,但是却会出现纵向或横向滚动条的现象,通过F12调试页面元素,会发现动态的增删overflow:auto元素属性,会解决以上问题。由此可知,动态渲染页面元...

一、前言

在前端项目开发过程中,解决适配性、兼容性问题是经常遇到且费事费力的苦差事,尤其是在开发Vue项目,应用部署在IE(尤其是IE9)上的时候。

在进行动态展示(根据后台返回的表头、表数据展示)搜索结果时,会遇到搜索结果适配屏幕宽度或高度,但是却会出现纵向或横向滚动条的现象,通过F12调试页面元素,会发现动态的增删overflow:auto元素属性,会解决以上问题。由此可知,动态渲染页面元素时,页面加载之前,由于页面元素尚未完全加载,导致计算元素属性值错误,会造成屏幕出现不适配,即会出现横向纵向滚动条的问题,现在的解决方案就是通过模拟增删overflow:auto元素属性,达到重新计算元素属性值以实现屏幕适配。

二、表格错位

  • 问题描述
    对于表格中的操作栏位处于表格右侧时,会发现表格会出现上下滚动过程中数据列与操作列错位情形。

  • 问题分析
    对于该问题,通过查看元素属性,会发现是由于元素中border宽度过大导致的。

  • 解决方案
    通过消除多余的元素border宽度,即取消元素border(注意:表头thtd均需包含),可解决以上问题。
    类似写法如下:

.ele .el-table__row td:nth-last-child(1), .ele el-table__header-wrapper th:nth-last-child(1) {
   border-right:none;
}

.ele .el-table__row td:nth-last-child(2), .ele el-table__header-wrapper th:nth-last-child(2) {
   border-right:none;
}

三、横向滚动条

  • 问题描述
    对于表格中的操作栏位处于表格左侧时,会发现表格会出现上下滚动过程中数据列与操作列错位情形。

  • 问题分析
    对于该问题,通过查看元素属性,会发现是由于页面出现横向滚动条导致的。

  • 解决方案
    通过消除横向滚动条,可解决以上问题。

通过网络查询的解决方案如下:

  • 方案一:尝试在渲染后修改数据让table重绘
    在配置化组件的updated钩子更新 columns 数据(中间需做一层转换,禁止直接修改 props),但 table 貌似不会将数据进行双向绑定,所以 table 没有出现改变,也就不会触发第二次宽度计算。

  • 方案二:尝试在渲染后将2px的border去掉
    在浏览器中调试发现去掉.el-table的左右 border 后,是可以解决内容溢出产生滚动条的问题的;具体做法是在 updated 1s后给el-table绑定一个 class,去除 border,但去除border 后,页面美观度降低。

  • 方案三:将宽度计算交给浏览器
    通过浏览器中调试,发现将.el-table__body-wrapperoverflow属性隐藏再显示,横向滚动条就不会出现了,应该是重新添加overflow: auto;使得浏览器自身重新计算了 table 的宽度,所以宽度足够的情况下不需要显示横向滚动条;

具体做法:

<!-- template -->
<el-table ref="configurationTable" border :data="data" :height="height" v-loading="isLoading" :class="['configurationTable', {afterRenderClass: showAfterRenderClass}]">
  <!-- xxx -->
</el-table>
// script
data () {
  return {
    showAfterRenderClass: false
  }
},
updated () {
  /**
   * 用于隐藏固定高度时显示不必要的scrollX的定时器
   * 这是el-table初次渲染时宽度计算的bug,可在渲染后通过重新赋予overflow: auto调整
   */
  const handleScrollX = setInterval(() => {
    // 检测是否已经生成table节点,如果不是就每隔0.5s检测一次
    // 只有生成了真实节点才能够通过修改overflow属性让浏览器重新计算
    if (this.$refs.configurationTable) {
      this.showAfterRenderClass = true
      clearInterval(handleScrollX)
    }
  }, 500)
}
/* style (注意不要设为scoped) */
/** configurationTable和afterRenderClass都是为了标记仅这个组件内修改 */
.configurationTable .el-table__body-wrapper {
    overflow: hidden;
}
.afterRenderClass {
    .el-table__body-wrapper {
        overflow: auto;
    }
}

经过项目实践,发现方案三可行,但需要进行适当改造。

方案三适用于页面数据展示,当将表格数据展示功能抽取成组件形式后,当对页面数据进行增删操作时,会发现横向滚动条出现,进而导致表格错位问题复现,根据父子组件通信过程,可通过父组件向子组件传一随机数的方式,当检测到子组件表格数据变化时,父组件将该随机数传给子组件,从而告知子组件表格数据已变化,需要重新计算页面元素,具体代码如下:

watch: {
  initnumer (val) {
  	if (val === 0) return 
  	this.showAfterRenderClass = false
  }
}

四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。