解决表格错位：优化Element UI Table Component，提高滚动效率

前端

2023-09-11 19:56:44

Element UI 表格组件：优化固定列，解决错位问题

简介

Element UI 的表格组件是一个功能强大的工具，用于在 Web 应用程序中显示数据。然而，在使用固定列时，可能会遇到错位的问题。本文将深入探讨导致此问题的原因，并提供两种解决方案。

问题分析

Element UI 表格组件的固定列属性会在表格中创建附加列，其位置被设为固定。当垂直滚动表格时，固定列将动态计算滚动高度，从而导致表格错位。

解决方案

有两种方法可以解决此问题：

1. 使用自定义指令

使用自定义指令，我们可以获取表格头部，并在表格滚动时动态计算滚动高度，并将固定列的滚动高度与之同步。以下是如何实现此解决方案：

import { Directive, bind, update } from 'vue'

const directive: Directive = {
  bind(el: HTMLElement, binding: any) {
    const tableHeader = el.querySelector('.el-table__header-wrapper') as HTMLElement
    const tableBody = el.querySelector('.el-table__body-wrapper') as HTMLElement

    const getScrollHeight = () => {
      return tableBody.scrollHeight
    }

    const syncFixedColumnScroll = () => {
      tableHeader.scrollLeft = tableBody.scrollLeft
    }

    tableBody.addEventListener('scroll', syncFixedColumnScroll)

    binding.value.unbind = () => {
      tableBody.removeEventListener('scroll', syncFixedColumnScroll)
    }
  },
  update(el: HTMLElement, binding: any) {
    if (binding.value.scrollHeight !== getScrollHeight()) {
      syncFixedColumnScroll()
    }
  }
}

export default directive

在 Vue 应用程序中注册自定义指令：

import MyDirective from './my-directive'

Vue.directive('my-directive', MyDirective)

然后，在需要固定列的表格上使用该指令：

<el-table :data="tableData">
  <el-table-column
    prop="name"
    label="姓名"
    fixed="left"
  />
  <el-table-column
    prop="age"
    label="年龄"
    fixed="right"
  />
  <el-table-column
    prop="address"
    label="地址"
  />
</el-table>