好的，我来帮你系统梳理 Element UI 的 el-table 组件，从基础用法、属性、事件到高级功能示例，方便快速掌握。

1️⃣ el-table 组件简介

  • el-table 是 Element UI 中用于 展示表格数据 的组件，功能强大，可支持分页、排序、筛选、固定列、合并单元格等。
  • 核心思想：通过 data 属性绑定数据，通过 el-table-column 定义列。

2️⃣ 基本用法

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

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2025-09-02', name: '张三', address: '北京市朝阳区' },
        { date: '2025-09-03', name: '李四', address: '上海市浦东新区' }
      ]
    };
  }
};
</script>

✅ 说明：

  • :data：绑定表格数据
  • prop：对应数据字段
  • label：表头文字
  • width：列宽
  • border：显示边框

3️⃣ 常用属性

属性说明
data表格数据数组
border是否显示边框
stripe是否斑马纹
size表格尺寸 medium / small / mini
fit列宽是否自适应，默认 true
highlight-current-row是否高亮当前行
row-key行数据的唯一标识，用于优化渲染
max-height最大高度，超出出现滚动条

4️⃣ el-table-column 常用属性

属性说明
prop数据字段
label表头文字
width列宽
min-width列最小宽度
sortable是否可排序
fixed列固定位置 left / right
align对齐方式 left / center / right
formatter自定义列显示格式，函数返回内容
show-overflow-tooltip内容溢出显示 tooltip

5️⃣ 事件与方法

事件说明
@row-click点击行触发
@current-change当前行变化
@selection-change多选行变化
@sort-change排序条件变化
@filter-change筛选条件变化
<el-table :data="tableData" @row-click="handleRowClick">
</el-table>

methods: {
  handleRowClick(row) {
    console.log('点击行：', row);
  }
}

6️⃣ 高级功能示例

6.1 多选

<el-table :data="tableData" @selection-change="handleSelection">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

6.2 排序

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" sortable></el-table-column>
  <el-table-column prop="date" label="日期" sortable="custom"></el-table-column>
</el-table>

6.3 固定列 + 滚动

<el-table :data="tableData" height="300">
  <el-table-column fixed prop="name" label="姓名" width="120"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

6.4 自定义列内容

<el-table-column label="操作">
  <template #default="scope">
    <el-button @click="editRow(scope.row)" type="primary" size="mini">编辑</el-button>
  </template>
</el-table-column>

7️⃣ 总结

  • 核心绑定：data + el-table-column
  • 常用功能：分页、排序、筛选、多选、固定列
  • 事件机制：行点击、当前行变化、选择变化、排序变化
  • 扩展能力：支持 slot 自定义列、formatter 自定义显示
  • 注意事项：
    1. 大数据量表格建议配合分页或虚拟滚动
    2. 对固定列或宽度设置要合理，避免布局错位