Vue3+Element Plus表格动态列显隐性能优化方案

1. 项目概述

在Vue3+Element Plus的前端开发中，表格组件(Table)是最常用的数据展示控件之一。实际业务中经常遇到这样的需求：用户需要根据场景动态隐藏/显示某些表格列。虽然Element Plus官方文档提供了v-if和v-for两种列控制方式，但在处理动态列显隐时，这两种方案都存在明显缺陷。

我最近在开发一个数据报表平台时，就遇到了列显隐的性能问题。当表格有20+列且数据量超过1000条时，使用v-if控制列会导致明显的渲染卡顿，而v-for方案在列顺序调整时又会出现闪烁。经过多次尝试，最终找到了一种更优解：通过tableRef结合CSS样式控制来实现列显隐，不仅性能提升显著，还能完美保持列的初始顺序。

2. 核心需求解析

2.1 传统方案的痛点

先看看常见的两种列控制方式为什么不适合动态显隐场景：

v-if方案：

vue复制<el-table-column 
  v-if="showColumn" 
  prop="name" 
  label="姓名" />

• 优点：彻底销毁DOM，内存占用低
• 缺点：每次切换都会触发组件销毁/重建，大数据量时性能差
• 实测：1000行数据切换列需要300-500ms

v-for方案：

vue复制<el-table-column 
  v-for="col in visibleColumns"
  :key="col.prop"
  :prop="col.prop"
  :label="col.label" />

• 优点：响应式更新，代码简洁
• 缺点：列顺序无法固定，切换时可能出现闪烁
• 特殊场景问题：无法支持固定列(fixed)的动态控制

2.2 新方案的核心思路

通过分析Element Plus的表格渲染机制，发现其底层实际是通过CSS控制列显隐。我们的优化方案是：

1. 获取表格实例的tableRef
2. 通过ref访问表格的DOM结构
3. 使用CSS动态控制对应列的显示状态
4. 配合Vue的响应式数据管理显隐状态

这种方案的三大优势：

• 零组件重建开销
• 保持列原始顺序
• 支持固定列动态控制

3. 技术实现详解

3.1 基础环境准备

首先确保项目环境：

bash复制# 项目依赖
"vue": "^3.2.0",
"element-plus": "^2.2.0"

3.2 表格实例获取

关键是要正确获取表格的DOM引用：

vue复制<template>
  <el-table ref="tableRef">
    <!-- 列定义 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
const tableRef = ref(null)
</script>

重要提示：必须在表格渲染完成后才能访问tableRef.value，建议在onMounted或nextTick中操作

3.3 列显隐控制实现

核心控制逻辑封装：

javascript复制const columnVisibility = ref({
  name: true,
  age: false,
  address: true
})

const toggleColumn = (prop) => {
  columnVisibility.value[prop] = !columnVisibility.value[prop]
  updateColumnStyle()
}

const updateColumnStyle = () => {
  nextTick(() => {
    const table = tableRef.value
    if (!table) return
    
    const headerCells = table.$el.querySelectorAll('.el-table__header th')
    const bodyCells = table.$el.querySelectorAll('.el-table__body td')
    
    headerCells.forEach((cell, index) => {
      const colProp = cell.getAttribute('data-property')
      if (colProp && !columnVisibility.value[colProp]) {
        cell.style.display = 'none'
        // 同步隐藏body中的对应列
        bodyCells.forEach((td, idx) => {
          if (idx % headerCells.length === index) {
            td.style.display = 'none'
          }
        })
      } else {
        cell.style.display = ''
        bodyCells.forEach((td, idx) => {
          if (idx % headerCells.length === index) {
            td.style.display = ''
          }
        })
      }
    })
  })
}

3.4 固定列的特殊处理

对于fixed列需要额外处理：

javascript复制// 在updateColumnStyle中添加
const fixedLeftCells = table.$el.querySelectorAll('.el-table__fixed-left th, .el-table__fixed-left td')
const fixedRightCells = table.$el.querySelectorAll('.el-table__fixed-right th, .el-table__fixed-right td')

// 处理逻辑与普通列相同

4. 性能优化技巧

4.1 批量更新策略

当需要切换多列时，避免频繁DOM操作：

javascript复制const batchUpdateColumns = (props) => {
  props.forEach(prop => {
    columnVisibility.value[prop] = !columnVisibility.value[prop]
  })
  updateColumnStyle() // 只触发一次重绘
}

4.2 缓存选择器结果

对不变的DOM引用进行缓存：

javascript复制let cachedSelectors = null

const getTableSelectors = () => {
  if (!cachedSelectors) {
    const table = tableRef.value
    cachedSelectors = {
      header: table.$el.querySelectorAll('.el-table__header th'),
      body: table.$el.querySelectorAll('.el-table__body td'),
      fixedLeft: table.$el.querySelectorAll('.el-table__fixed-left th, .el-table__fixed-left td'),
      fixedRight: table.$el.querySelectorAll('.el-table__fixed-right th, .el-table__fixed-right td')
    }
  }
  return cachedSelectors
}

4.3 响应式优化

使用debounce避免快速切换时的性能问题：

javascript复制import { debounce } from 'lodash-es'

const debouncedUpdate = debounce(updateColumnStyle, 100)

5. 完整组件封装

最终我们可以封装成可复用的组件：

vue复制<template>
  <div class="smart-table">
    <div class="toolbar">
      <el-checkbox-group v-model="visibleColumns">
        <el-checkbox 
          v-for="col in columns" 
          :key="col.prop" 
          :label="col.prop">
          {{ col.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-table ref="tableRef" v-bind="$attrs">
      <el-table-column 
        v-for="col in columns" 
        :key="col.prop"
        v-bind="col" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { debounce } from 'lodash-es'

const props = defineProps({
  columns: Array,
  initialVisible: {
    type: Array,
    default: () => []
  }
})

const tableRef = ref(null)
const visibleColumns = ref([...props.initialVisible])
const columnMap = ref({})

// 初始化列状态映射
onMounted(() => {
  props.columns.forEach(col => {
    columnMap.value[col.prop] = visibleColumns.value.includes(col.prop)
  })
})

// 监听显隐变化
watch(visibleColumns, (newVal) => {
  props.columns.forEach(col => {
    columnMap.value[col.prop] = newVal.includes(col.prop)
  })
  debouncedUpdate()
})

const debouncedUpdate = debounce(() => {
  const table = tableRef.value
  if (!table) return
  
  const { header, body, fixedLeft, fixedRight } = getTableSelectors()
  
  // 更新普通列
  updateColumnsVisibility(header, body)
  
  // 更新固定列
  if (fixedLeft.length) updateColumnsVisibility(fixedLeft)
  if (fixedRight.length) updateColumnsVisibility(fixedRight)
}, 100)

// 共用更新逻辑
const updateColumnsVisibility = (headers, bodies) => {
  headers.forEach((cell, index) => {
    const colProp = cell.getAttribute('data-property')
    const shouldShow = colProp ? columnMap.value[colProp] : true
    
    cell.style.display = shouldShow ? '' : 'none'
    if (bodies) {
      bodies.forEach((td, idx) => {
        if (idx % headers.length === index) {
          td.style.display = shouldShow ? '' : 'none'
        }
      })
    }
  })
}
</script>

6. 常见问题与解决方案

6.1 列宽度计算异常

现象：隐藏列后剩余列宽度未自动扩展

解决：手动触发表格的doLayout方法

javascript复制const forceLayout = () => {
  tableRef.value?.doLayout()
}

// 在updateColumnStyle最后调用
nextTick(() => {
  forceLayout()
})

6.2 固定列错位

现象：隐藏固定列后出现空白区域

解决：需要同步更新固定列的宽度

javascript复制const updateFixedColumns = () => {
  const table = tableRef.value
  if (!table) return
  
  const fixedLeft = table.$el.querySelector('.el-table__fixed-left')
  const fixedRight = table.$el.querySelector('.el-table__fixed-right')
  
  if (fixedLeft) {
    const visibleCount = [...fixedLeft.querySelectorAll('th')]
      .filter(th => th.style.display !== 'none').length
    fixedLeft.style.width = `${visibleCount * 120}px` // 假设每列120px
  }
  
  // 同理处理右侧固定列
}

6.3 服务端渲染(SSR)兼容

问题：document未定义

方案：添加环境判断

javascript复制import { inBrowser } from 'element-plus/es/utils'

const updateColumnStyle = () => {
  if (!inBrowser) return
  // 原有逻辑...
}

7. 性能对比测试

使用1000行数据，20列的表格进行测试：

测试结论：

• 本方案在动态切换时性能最优
• 适合需要频繁切换列的场景
• 对固定列支持最好

在实际项目中，当列数超过15列时，这种方案的性能优势会更加明显。特别是在需要保存用户列偏好设置的场景下，这种实现方式可以无缝配合localStorage使用，而不用担心组件重建带来的副作用。