好的，我帮你系统整理一下 Element UI 的 Table 表格用法，包括基本用法、属性、插槽、事件、操作列、分页和高级用法。内容面向 Vue.js 开发者，便于快速上手和参考。

Element UI Table 表格全解析

1. 基本用法

<template>
  <el-table :data="tableData" 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-10-09', name: '张三', address: '北京市' },
        { date: '2025-10-10', name: '李四', address: '上海市' },
      ]
    }
  }
}
</script>
  • :data：绑定表格数据，数组格式
  • <el-table-column>：定义每一列
    • prop：字段名，对应数据中的属性
    • label：列名
    • width：列宽

2. 属性常用配置

属性说明
border是否显示边框
stripe是否斑马纹表格
size表格尺寸，可选 medium / small / mini
highlight-current-row是否高亮当前行
row-key行的唯一标识（优化性能，必须唯一）

示例：

&lt;el-table :data="tableData" border stripe highlight-current-row row-key="id" size="small">

3. 插槽自定义内容

可以使用 作用域插槽自定义列的渲染内容：

&lt;el-table-column label="操作">
  &lt;template slot-scope="scope">
    &lt;el-button @click="editRow(scope.row)" type="primary" size="mini">编辑&lt;/el-button>
    &lt;el-button @click="deleteRow(scope.row)" type="danger" size="mini">删除&lt;/el-button>
  &lt;/template>
&lt;/el-table-column>
  • slot-scope="scope" 中的 scope.row 表示当前行数据
  • scope.$index 表示当前行索引

4. 表头自定义

&lt;el-table-column label="姓名">
  &lt;template slot="header">
    &lt;span style="color: red;">姓名&lt;/span>
  &lt;/template>
&lt;/el-table-column>
  • 使用 slot="header" 可以自定义表头内容，比如加图标或排序标记

5. 排序和筛选

排序

&lt;el-table-column prop="age" label="年龄" sortable>&lt;/el-table-column>
  • sortable：可选 true / "custom"
  • "custom" 时，需要监听 sort-change 事件自行处理排序逻辑
&lt;el-table @sort-change="handleSortChange">&lt;/el-table>

筛选

&lt;el-table-column prop="status" label="状态" :filters="[{text:'启用',value:'1'},{text:'禁用',value:'0'}]" filter-method="filterStatus" filter-placement="bottom-end">
  • filters：筛选项数组
  • filter-method：自定义过滤函数

6. 多选和选择操作

&lt;el-table-column type="selection" width="55">&lt;/el-table-column>
  • type="selection" 自动生成复选框列
  • 通过事件获取选中行：
&lt;el-table @selection-change="handleSelectionChange">

7. 分页配合

&lt;el-pagination
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  layout="total, prev, pager, next, jumper">
&lt;/el-pagination>
  • current-page：当前页
  • page-size：每页条数
  • total：总条数
  • layout：分页布局

8. 高级功能

  1. 固定列
&lt;el-table-column prop="name" label="姓名" fixed>&lt;/el-table-column>
  1. 合并行/列
&lt;el-table :span-method="arraySpanMethod">&lt;/el-table>
  • span-method 返回 [rowspan, colspan] 数组，控制单元格合并
  1. 动态列
&lt;el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label">&lt;/el-table-column>
  1. 树形表格
&lt;el-table :data="treeData" row-key="id" :tree-props="{children:'children', hasChildren:'hasChildren'}">

9. 事件常用列表

事件名说明
row-click行点击事件
row-dblclick行双击
row-contextmenu行右键
selection-change复选框选中变化
sort-change排序变化
current-change当前行变化（可结合 highlight-current-row）

总结

Element UI Table 是一个功能丰富的表格组件，支持：

  • 基本表格展示
  • 排序、筛选
  • 多选、操作列
  • 固定列、树形表格
  • 分页和自定义插槽

通过合理使用 索引列、插槽、自定义事件和分页，可以轻松构建复杂的后台管理表格。

如果你需要，我可以帮你整理一份 Element UI Table 高级应用示意图，把：

  • 基础表格
  • 插槽操作列
  • 分页与多选
  • 固定列和树形表格