ElementPlus 表格组件深度指南：从基础到高级实战

🔍 一、表格核心功能概览

ElementPlus 的el-table 组件是构建数据驱动型应用的利器，支持以下核心功能：

• 数据渲染：静态数据、动态加载、分页
• 列自定义：模板列、格式化、条件渲染
• 交互功能：排序、过滤、行选择、展开行
• 性能优化：虚拟滚动、懒加载
• 样式控制：固定列、合并单元格、斑马纹

🚀 二、基础使用：快速构建数据表格

1️⃣ 基础表格结构

<template>  
  <el-table :data="tableData" border style="width: 100%">  
    <el-table-column prop="date" label="日期" width="180" />  
    <el-table-column prop="name" label="姓名" />  
    <el-table-column prop="address" label="地址" />  
  </el-table>  
</template>  

<script setup>  
const tableData = [  
  { date: '2024-01-01', name: '张三', address: '北京' },  
  { date: '2024-01-02', name: '李四', address: '上海' }  
]  
</script>  

2️⃣ 自定义列模板

<el-table-column label="状态">  
  <template #default="{ row }">  
    <el-tag :type="row.status ? 'success' : 'danger'">  
      {{ row.status ? '启用' : '禁用' }}  
    </el-tag>  
  </template>  
</el-table-column>  

🛠️ 三、高级功能实战

1️⃣ 排序与过滤

<el-table-column  
  prop="salary"  
  label="薪资"  
  sortable  
  :filters="[  
    { text: '>10000', value: 10000 },  
    { text: '<=10000', value: 0 }  
  ]"  
  :filter-method="filterSalary"  
/>  

<script setup>  
const filterSalary = (value, row) => {  
  return value === 10000 ? row.salary > 10000 : row.salary <= 10000  
}  
</script>  

2️⃣ 多选与行操作

<el-table  
  ref="multipleTableRef"  
  :data="tableData"  
  @selection-change="handleSelectionChange"  
>  
  <el-table-column type="selection" width="55" />  
  <el-table-column label="操作">  
    <template #default="{ row }">  
      <el-button @click="editRow(row)">编辑</el-button>  
      <el-button type="danger" @click="deleteRow(row)">删除</el-button>  
    </template>  
  </el-table-column>  
</el-table>  

<script setup>  
const selectedRows = ref([])  
const handleSelectionChange = (rows) => {  
  selectedRows.value = rows  
}  
</script>  

3️⃣ 可展开行

<el-table :data="tableData">  
  <el-table-column type="expand">  
    <template #default="{ row }">  
      <div style="padding: 20px">  
        <p>详细地址：{{ row.fullAddress }}</p>  
      </div>  
    </template>  
  </el-table-column>  
  <!-- 其他列 -->  
</el-table>  

⚡ 四、性能优化技巧

1️⃣ 虚拟滚动（大数据量优化）

<el-table-v2  
  :columns="columns"  
  :data="data"  
  :width="1000"  
  :height="500"  
  :row-height="50"  
  fixed  
/>  

2️⃣ 懒加载数据

<el-table  
  :data="tableData"  
  v-infinite-scroll="loadMore"  
  infinite-scroll-disabled="busy"  
>  
  <!-- 列定义 -->  
</el-table>  

<script setup>  
const loadMore = async () => {  
  if (busy.value) return  
  busy.value = true  
  const res = await fetchNextPage()  
  tableData.value.push(...res.data)  
  busy.value = false  
}  
</script>  

3️⃣ 按需渲染复杂内容

使用v-if 控制复杂模板的渲染：

<el-table-column label="详情">  
  <template #default="{ row }">  
    <div v-if="row.showDetails">  
      <!-- 复杂内容 -->  
    </div>  
    <el-button v-else @click="toggleDetails(row)">展开</el-button>  
  </template>  
</el-table-column>  

🎨 五、样式深度定制

1️⃣ 全局样式覆盖

/* element-override.scss */  
.el-table {  
  th {  
    background-color: #f5f7fa !important;  
  }  
  .cell {  
    white-space: nowrap;  
  }  
}  

2️⃣ 斑马纹与悬停效果

<el-table  
  :data="tableData"  
  stripe  
  :row-class-name="tableRowClassName"  
>  
<script setup>  
const tableRowClassName = ({ rowIndex }) => {  
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'  
}  
</script>  

<style>  
.even-row {  
  background-color: #fafafa;  
}  
</style>  

🚨 六、常见问题与解决方案

1️⃣ 动态更新数据不渲染

• 症状：数据更新后表格未刷新
• 解决：确保使用响应式数据，或强制更新 DOM：

  import { nextTick } from 'vue'  
  
  const updateData = async () => {  
    tableData.value = newData  
    await nextTick()  
    multipleTableRef.value?.doLayout()  
  }  
  

2️⃣ 固定列错位问题

• 症状：固定列与主体列宽度不一致
• 解决：显式设置列宽并调用 doLayout()：

  <el-table ref="tableRef" @on-mounted="tableRef?.doLayout()">  
    <el-table-column width="200" fixed />  
  </el-table>  
  

3️⃣ 复杂表头合并

<el-table :data="tableData" :span-method="spanMethod">  
  <el-table-column label="日期" prop="date" />  
  <el-table-column label="详细信息">  
    <el-table-column prop="name" label="姓名" />  
    <el-table-column prop="age" label="年龄" />  
  </el-table-column>  
</el-table>  

<script setup>  
const spanMethod = ({ rowIndex, columnIndex }) => {  
  if (columnIndex === 0 && rowIndex % 2 === 0) {  
    return { rowspan: 2, colspan: 1 }  
  }  
}  
</script>  

🌟 七、总结：ElementPlus 表格最佳实践

📢 实战讨论：你在使用 ElementPlus 表格时遇到过哪些性能问题？如何优化十万级数据量的渲染？欢迎分享你的经验！👇