element-ui表格在移动端固定列错位解决方案

前端

2023-09-23 14:42:50

修复 Element UI Table 组件在移动端视图下固定列错位的问题

摘要

Element UI 的 table 组件是一款功能强大的 Vue.js 工具，用于展示和管理表格数据。但在移动端视图下，固定列可能会出现错位问题。本文将深入探讨导致此问题的根源，并提供一个有效的解决方案来解决对齐错误。

问题根源

当切换到移动端视图时，Element UI table 组件会自动隐藏非固定列。这导致浏览器窗口宽度发生变化，固定列宽度计算出现偏差，从而导致对齐错误。

解决方案

要解决此问题，我们需要在切换到移动端视图时重新计算固定列的宽度。具体步骤如下：

在 mounted 生命周期钩子中，使用 $refs 获取表格实例：

mounted() {
  this.tableInstance = this.$refs.table;
}

在 watch 中监听视窗宽度的变化：

watch: {
  $route(to, from) {
    // 在路由切换时触发
    this.handleWindowResize();
  },
  window: {
    handler: "handleWindowResize",
    immediate: true
  }
}

在 handleWindowResize 方法中，重新计算固定列的宽度：

handleWindowResize() {
  if (this.tableInstance) {
    this.tableInstance.recalculateFixedColumns();
  }
}

通过这些步骤，固定列的宽度将在切换到移动端视图时动态调整，从而解决对齐错误的问题。

示例代码

以下示例代码片段演示了如何实现上述解决方案：

<script>
export default {
  mounted() {
    this.tableInstance = this.$refs.table;
  },
  watch: {
    $route(to, from) {
      this.handleWindowResize();
    },
    window: {
      handler: "handleWindowResize",
      immediate: true
    }
  },
  methods: {
    handleWindowResize() {
      if (this.tableInstance) {
        this.tableInstance.recalculateFixedColumns();
      }
    }
  }
};
</script>