关于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表格错位内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/qq_39998026/article/details/124862604
相关文章
- 这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
详解element-ui 表单校验 Rules 配置 常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11解析element-ui中upload组件传递文件及其他参数的问题
这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法,需要的朋友可以参考下...2021-11-10- 这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下...2021-10-17
- 这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-13
vue中element-ui组件默认css样式修改的四种方式
在前端项目中会运用各种组件,有时组件的默认样式并不是你项目中所需要的,你需要更改样式,下面这篇文章主要给大家介绍了关于vue中element-ui组件默认css样式修改的四种方式,需要的朋友可以参考下...2021-10-05- 有个组件库的名称叫做element-ui,基于Vue2.0开发,提供了丰富的PC端组件,本文通过实例代码给大家介绍element-ui 上传图片后标注坐标点的示例代码,感兴趣的朋友跟随小编一起看看吧...2021-07-08
- 这篇文章主要介绍了Django后端分离 使用element-ui文件上传方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-12
关于Element-ui中el-table出现的表格错位问题解决
使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题,下面这篇文章主要给大家介绍了关于Element-ui中el-table出现的表格错位问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下...2022-07-22- 这篇文章主要介绍了Vue如何动态修改el-table的某列数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-04-23
解决页面整体使用transform scale后高德地图点位点击偏移错位问题
这篇文章主要介绍了解决页面整体使用transformscale后高德地图点位点击偏移错位问题的方法,具有一定的参考价值,需要的小伙伴可以参考一下...2022-01-12- 本文主要介绍了vueel-table实现递归嵌套的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2022-08-14
element-ui修改el-form-item样式的详细示例
在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下...2022-11-15- 这篇文章主要介绍了vueel-table动态添加行与删除行的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-07-26
- 这篇文章主要给大家介绍了关于el-table虚拟滚动的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下...2022-12-30
- 这篇文章主要为大家介绍了Element使用el-table组件二次封装示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-06-24