关于Element-ui中el-table出现的表格错位问题解决
前言
在使用element-ui中的el-table时,我们经常会用到fiexd属性,而使用了fixed属性之后,就会容易在各种场景出现表格错位的问题。
查阅element-ui官网,发现官网提供了doLayout方法来解决这个问题

总结容易出现错位问题的几种场景及解决办法
1、数据更新后出现的错位问题
1.1 直接在数据赋值后执行doLayout方法
this.data = data;
// 在数据更新后执行
this.$nextTick(() => {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
})1.2在生命周期updated里执行doLayout方法
updated() {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
}2、浏览器窗口大小变化时出现的错位问题
// 绑定window的onresize事件(注意,onresize事件只能有一个)
window.onresize = () => {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
}3、当有多个Tab标签时,切换标签出现的错位问题
这时可以有多种解决方式
3.1 在组件守卫beforeRouteEnter里执行doLayout方法
beforeRouteEnter(to, from, next) {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
//不能忘记这个哦
next();
}3.2 如果使用了keep-alive,可以在activated里执行doLayout方法
activated() {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
}3.3 也可以通过监听路由,在watch里执行doLayout方法
watch: {
$route() {
this.$nextTick(() => {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
})
}
}如果当项目已经开发进入尾声,此时需要修改大量的文件,而我们可能更希望一次性解决这个问题,这个时候可以在App.vue里找到解决的思路
<template>
<div id="app">
<router-view ref="appView"></router-view>
</div>
</template>
<script>
export default {
data() {
},
watch: {
$route() {
//切换标签时
this.handleRefreshTable();
}
},
created() {
let _this = this;
//窗口改变时
window.onresize = function () {
_this.handleRefreshTable();
};
},
updated() {
//数据改变时
this.handleRefreshTable();
},
methods: {
handleRefreshTable() {
this.$nextTick(() => {
// 获取页面中已注册过ref的所有的子组件。
let refList = this.$refs.appView.$refs;
if (refList) {
for (let i of Object.keys(refList)) {
// 根据doLayout方法判断子组件是不是el-table
if (refList[i] && refList[i].doLayout) {
// 执行doLayout方法
refList[i].doLayout();
}
}
}
})
}
}
};
</script>附:解决element中el-table中表头和内容错位的方法
在使用element中table组件的时候,有时候在部分不兼容的浏览器中,会出现以下表头和内容错位的情况。以下提供了两种解决方案,亲测有效果。

方法一:
在第一个el-table-column中加上:key="Math.random()"
<el-table :data="tableData" border>
<el-table-column :key="Math.random()" prop="date" label="日期"> </el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>
方法二:
在<el-table>上绑定ref='tableRef' ,然后在调取到数据后执行以下代码
this.$nextTick(() => {
this.$refs.tableRef.doLayout()
})
总结
到此这篇关于Element-ui中el-table出现的表格错位问题解决的文章就介绍到这了,更多相关Element-ui中el-table表格错位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- element表格el-table实现虚拟滚动解决卡顿问题
- Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能实例
- vue element-ui实现el-table表格多选以及回显方式
- el-element中el-table表格嵌套el-select实现动态选择对应值功能
- element el-table表格的二次封装实现(附表格高度自适应)
- VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
- VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
- element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)
相关文章
vue恢复初始数据this.$data,this.$options.data()解析
这篇文章主要介绍了vue恢复初始数据this.$data,this.$options.data()解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03
vue开发移动端使用better-scroll时click事件失效的解决方案
这篇文章主要介绍了vue开发移动端使用better-scroll时click事件失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2021-07-07
vue demi支持sfc方式的vue2vue3通用库开发详解
这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
vue3中实现文本显示省略号和tooltips提示框的方式详解
在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下2024-04-04


最新评论