Vue进阶（幺幺玖）：element-ui配置化table组件的适应性问题（横向滚动条）

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

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

表格错位

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

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

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

.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;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

横向滚动条

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

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

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

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

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

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

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

具体做法：

<!-- template -->
<el-table ref="configurationTable" border :data="data" :height="height" v-loading="isLoading" :class="['configurationTable', {afterRenderClass: showAfterRenderClass}]">
  <!-- xxx -->
</el-table>

  

 

  
1
  
2
  
3
  
4
 

// 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)
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

/* style (注意不要设为scoped) */
/** configurationTable和afterRenderClass都是为了标记仅这个组件内修改 */
.configurationTable .el-table__body-wrapper { overflow: hidden;
}
.afterRenderClass { .el-table__body-wrapper { overflow: auto; }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/106419687