Vue3 Element Plus表格列显隐优化方案

1. 项目背景与需求分析

在后台管理系统开发中，表格组件是最常用的功能模块之一。Element Plus作为Vue3生态中最受欢迎的UI组件库，其el-table组件凭借丰富的功能和良好的扩展性，成为众多开发者的首选。但在实际项目中，我们经常会遇到一个经典需求：让用户能够自定义显示/隐藏表格列。

传统方案通常采用v-if或v-for动态渲染列，但这种实现方式存在明显缺陷：

• 每次切换列显示状态都会触发组件重新渲染
• 表格数据会重新加载导致用户体验不连贯
• 无法保持表格的当前状态（如排序、筛选等）

2. 技术方案选型对比

2.1 常见实现方案对比

2.2 为什么选择样式控制方案

通过tableRef操作DOM结合样式控制的方式，具有以下优势：

1. 零渲染开销：仅修改CSS不触发Vue响应式更新
2. 状态保持：表格的排序、筛选等状态不会丢失
3. 平滑过渡：列显隐切换无闪烁感
4. 内存友好：不需要频繁创建/销毁组件实例

3. 核心实现细节

3.1 获取表格DOM引用

javascript复制const tableRef = ref(null)

// 获取表格header和body的DOM节点
const getTableNodes = () => {
  const header = tableRef.value?.$el.querySelector('.el-table__header-wrapper')
  const body = tableRef.value?.$el.querySelector('.el-table__body-wrapper')
  return { header, body }
}

3.2 列显隐控制逻辑

javascript复制const hiddenColumns = ref([])

const toggleColumn = (prop) => {
  const { header, body } = getTableNodes()
  const colIndex = columns.value.findIndex(col => col.prop === prop)
  
  if (colIndex === -1) return
  
  // 切换显隐状态
  if (hiddenColumns.value.includes(prop)) {
    hiddenColumns.value = hiddenColumns.value.filter(p => p !== prop)
  } else {
    hiddenColumns.value.push(prop)
  }
  
  // 应用样式
  applyColumnStyle(header, body, colIndex)
}

3.3 样式动态应用

javascript复制const applyColumnStyle = (header, body, colIndex) => {
  if (!header || !body) return
  
  // 处理表头
  const headerCols = header.querySelectorAll('th')
  if (headerCols[colIndex]) {
    headerCols[colIndex].style.display = 
      hiddenColumns.value.includes(columns.value[colIndex].prop) 
        ? 'none' 
        : ''
  }
  
  // 处理表体
  const bodyRows = body.querySelectorAll('tr')
  bodyRows.forEach(row => {
    const cells = row.querySelectorAll('td')
    if (cells[colIndex]) {
      cells[colIndex].style.display = 
        hiddenColumns.value.includes(columns.value[colIndex].prop)
          ? 'none'
          : ''
    }
  })
}

4. 完整组件封装实现

4.1 组件props设计

javascript复制props: {
  columns: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(col => 'prop' in col && 'label' in col)
    }
  },
  data: {
    type: Array,
    default: () => []
  },
  defaultHidden: {
    type: Array,
    default: () => []
  }
}

4.2 组件状态管理

javascript复制setup(props) {
  const tableRef = ref(null)
  const hiddenColumns = ref([...props.defaultHidden])
  
  // 监听columns变化重新应用样式
  watch(() => props.columns, () => {
    nextTick(() => {
      applyAllColumnsStyle()
    })
  }, { deep: true })
  
  // 初始化应用样式
  onMounted(() => {
    applyAllColumnsStyle()
  })
  
  return {
    tableRef,
    hiddenColumns,
    toggleColumn
  }
}

5. 性能优化实践

5.1 批量DOM操作优化

javascript复制const applyAllColumnsStyle = () => {
  const { header, body } = getTableNodes()
  if (!header || !body) return
  
  // 使用requestAnimationFrame优化渲染
  requestAnimationFrame(() => {
    props.columns.forEach((col, index) => {
      const shouldHide = hiddenColumns.value.includes(col.prop)
      
      // 表头处理
      const headerCols = header.querySelectorAll('th')
      if (headerCols[index]) {
        headerCols[index].style.display = shouldHide ? 'none' : ''
      }
      
      // 表体处理
      const bodyRows = body.querySelectorAll('tr')
      bodyRows.forEach(row => {
        const cells = row.querySelectorAll('td')
        if (cells[index]) {
          cells[index].style.display = shouldHide ? 'none' : ''
        }
      })
    })
  })
}

5.2 列宽自适应调整

当隐藏列时，需要调整剩余列的宽度以保证表格布局合理：

javascript复制const adjustColumnWidths = () => {
  const table = tableRef.value?.$el
  if (!table) return
  
  const visibleColumns = props.columns.filter(
    col => !hiddenColumns.value.includes(col.prop)
  )
  
  // 计算平均宽度
  const avgWidth = `${100 / visibleColumns.length}%`
  
  // 应用新宽度
  const cols = table.querySelectorAll('colgroup > col')
  cols.forEach((col, index) => {
    if (!hiddenColumns.value.includes(props.columns[index].prop)) {
      col.style.width = avgWidth
    }
  })
}

6. 实际应用中的问题与解决方案

6.1 固定列处理

当表格使用fixed固定列时，需要特殊处理：

javascript复制const handleFixedColumns = () => {
  const table = tableRef.value?.$el
  if (!table) return
  
  // 处理左侧固定列
  const fixedLeft = table.querySelector('.el-table__fixed-left')
  if (fixedLeft) {
    // 同步主表格的显隐状态
    // ...实现逻辑类似主表格
  }
  
  // 处理右侧固定列
  const fixedRight = table.querySelector('.el-table__fixed-right')
  if (fixedRight) {
    // ...同上
  }
}

6.2 表头分组处理

对于复杂表头场景，需要递归处理：

javascript复制const processHeaderGroups = (node) => {
  if (!node) return
  
  // 处理当前节点
  if (node.classList.contains('el-table__header-cell')) {
    const colProp = node.getAttribute('data-prop')
    if (colProp && hiddenColumns.value.includes(colProp)) {
      node.style.display = 'none'
    }
  }
  
  // 递归处理子节点
  node.childNodes.forEach(child => {
    processHeaderGroups(child)
  })
}

7. 组件使用示例

7.1 基础用法

html复制<template>
  <div>
    <el-checkbox-group v-model="hiddenColumns">
      <el-checkbox 
        v-for="col in columns" 
        :key="col.prop" 
        :label="col.prop"
      >
        {{ col.label }}
      </el-checkbox>
    </el-checkbox-group>
    
    <smart-table
      ref="tableRef"
      :columns="columns"
      :data="tableData"
      :default-hidden="['date']"
    />
  </div>
</template>

7.2 与分页联动

当表格有分页时，切换页码需要重新应用样式：

javascript复制const handlePageChange = () => {
  nextTick(() => {
    applyAllColumnsStyle()
  })
}

8. 扩展功能实现

8.1 列显隐状态持久化

javascript复制// 使用localStorage保存状态
const saveColumnState = () => {
  localStorage.setItem('tableColumnsState', 
    JSON.stringify(hiddenColumns.value))
}

// 初始化时读取状态
const loadColumnState = () => {
  const saved = localStorage.getItem('tableColumnsState')
  if (saved) {
    hiddenColumns.value = JSON.parse(saved)
  }
}

8.2 列顺序调整支持

结合拖拽库实现列顺序调整：

javascript复制import { useDraggable } from '@vueuse/core'

const setupColumnDrag = () => {
  const header = tableRef.value?.$el.querySelector('.el-table__header-wrapper')
  if (!header) return
  
  const cols = header.querySelectorAll('th')
  cols.forEach(col => {
    useDraggable(col, {
      onEnd: () => {
        // 处理列顺序变更逻辑
      }
    })
  })
}

9. 性能实测数据

在1000行x10列的数据量下测试：

10. 注意事项与最佳实践

1. 响应式更新处理：

   • 数据更新后需要在nextTick中重新应用样式
   • 使用watch监听columns变化

2. 浏览器兼容性：

   • 现代浏览器都支持display样式
   • 如需支持IE11需要额外polyfill

3. 性能监控：

   • 大数据量时建议使用虚拟滚动
   • 可使用performance API监控渲染耗时

4. 可访问性：

   • 为切换按钮添加ARIA属性
   • 确保隐藏内容对屏幕阅读器不可见

5. 样式覆盖问题：

   • 使用scoped样式避免污染
   • 适当提高样式优先级

在实际项目中，这种实现方式已经过多个大型后台管理系统验证，在保持功能完整性的同时，性能表现显著优于传统方案。特别是在需要频繁切换列显示状态的场景下，用户体验提升明显。