关于Element-ui中el-table出现的表格错位问题解决

 更新时间:2022年07月22日 12:24:00   作者:卿本无忧  
使用ElementUI的el-table后,偶然发现出现行列错位、对不齐问题,下面这篇文章主要给大家介绍了关于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表格错位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue项目build后,图片加载不出来的解决

    Vue项目build后,图片加载不出来的解决

    这篇文章主要介绍了Vue项目build后,图片加载不出来的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue恢复初始数据this.$data,this.$options.data()解析

    vue恢复初始数据this.$data,this.$options.data()解析

    这篇文章主要介绍了vue恢复初始数据this.$data,this.$options.data()解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue.js实现一个瀑布流的组件

    vue.js实现一个瀑布流的组件

    这篇文章主要为大家介绍了vue.js实现一个瀑布流的组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue开发移动端使用better-scroll时click事件失效的解决方案

    vue开发移动端使用better-scroll时click事件失效的解决方案

    这篇文章主要介绍了vue开发移动端使用better-scroll时click事件失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • vue demi支持sfc方式的vue2vue3通用库开发详解

    vue demi支持sfc方式的vue2vue3通用库开发详解

    这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue表单验证自定义验证规则详解

    vue表单验证自定义验证规则详解

    这篇文章主要为大家详细介绍了vue表单验证自定义验证规则,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue2.0获取鼠标位置的方法

    vue2.0获取鼠标位置的方法

    今天小编就为大家分享一篇vue2.0获取鼠标位置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue实现导航收缩框

    vue实现导航收缩框

    这篇文章主要为大家详细介绍了vue实现导航收缩框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3中实现文本显示省略号和tooltips提示框的方式详解

    vue3中实现文本显示省略号和tooltips提示框的方式详解

    在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下
    2024-04-04
  • 实例讲解v-if和v-show的区别

    实例讲解v-if和v-show的区别

    今天小编就为大家分享一篇关于实例讲解v-if和v-show的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论