Table 表格

表格用于展示大量结构化数据，支持排序、筛选、合计、展开行、合并单元格等高级功能。是数据密集型后台管理系统中最常用的组件。

何时使用

  • 当需要展示大量结构化数据，且需要排序、筛选等功能时
  • 当需要表格与分页组件配合处理海量数据时
  • 当需要自定义单元格内容（如按钮、标签、链接等）时
  • 当需要行展开、合计行、单元格合并等高级功能时

基础表格

<template>
  <el-table :data="tableData" border stripe>
    <el-table-column type="index" label="#" width="50" />
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="email" label="邮箱" show-overflow-tooltip />
    <el-table-column prop="role" label="角色" width="80" />
    <el-table-column label="操作" width="160">
      <template slot-scope="{ row }">
        <el-button type="primary" size="mini">编辑</el-button>
        <el-button type="danger" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', email: 'zhangsan@example.com', role: '管理员' },
        { name: '李四', email: 'lisi@example.com', role: '编辑' },
        { name: '王五', email: 'wangwu@example.com', role: '访客' }
      ]
    }
  }
}
</script>

排序

通过在 el-table-column 上设置 sortable 属性即可开启排序功能。

<el-table :data="tableData" border @sort-change="onSortChange">
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="age" label="年龄" width="80" sortable />
  <el-table-column prop="score" label="分数" width="100" sortable />
</el-table>

默认排序

通过 default-sort 属性设置初始排序。

<el-table
  :data="tableData"
  border
  :default-sort="{ prop: 'age', order: 'descending' }"
>
  <el-table-column prop="age" label="年龄" width="80" sortable :sort-method="customSort" />
</el-table>

筛选

通过 filters 和 filter-method 属性开启列筛选功能。

<el-table :data="tableData" border @filter-change="onFilterChange">
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column
    prop="role"
    label="角色"
    width="100"
    :filters="[
      { text: '管理员', value: '管理员' },
      { text: '编辑', value: '编辑' },
      { text: '访客', value: '访客' }
    ]"
  />
</el-table>

单选筛选

设置 filter-multiple 为 false 可切换为单选筛选模式。

<el-table :data="tableData" border>
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column
    prop="role"
    label="角色"
    width="100"
    :filters="[
      { text: '管理员', value: '管理员' },
      { text: '编辑', value: '编辑' },
      { text: '访客', value: '访客' }
    ]"
    :filter-multiple="false"
  />
</el-table>

默认筛选值

通过 filtered-value 设置初始筛选条件。

<el-table :data="tableData" border>
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column
    prop="role"
    label="角色"
    width="100"
    :filters="roleFilters"
    :filtered-value="['管理员']"
  />
</el-table>

多选

通过 type="selection" 列开启多选功能，表头复选框支持全选和半选状态。

<el-table ref="table" :data="tableData" border @selection-change="onSelectionChange">
  <el-table-column type="selection" width="48" />
  <el-table-column prop="name" label="姓名" />
</el-table>

<script>
export default {
  methods: {
    toggleAll() {
      this.$refs.table.toggleAllSelection()
    },
    clearAll() {
      this.$refs.table.clearSelection()
    }
  }
}
</script>

行可选控制

通过 selectable 属性控制哪些行可以被勾选。

<el-table :data="tableData" border @selection-change="onSelectionChange">
  <el-table-column type="selection" width="48" :selectable="canSelect" />
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="age" label="年龄" width="80" />
</el-table>

<script>
export default {
  methods: {
    canSelect(row) {
      return row.age > 25
    }
  }
}
</script>

高亮选中行

通过 highlight-selection-row 属性高亮被选中的行。

<el-table :data="tableData" border highlight-selection-row @selection-change="onSelectionChange">
  <el-table-column type="selection" width="48" />
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

合计行

通过 show-summary 属性开启合计行，支持自定义合计方法。

<el-table :data="tableData" border show-summary>
  <el-table-column prop="name" label="商品" width="120" />
  <el-table-column prop="price" label="单价" width="80" />
  <el-table-column prop="quantity" label="数量" width="80" />
  <el-table-column prop="total" label="总价" />
</el-table>

自定义合计方法

<el-table :data="tableData" border show-summary :summary-method="customSummary">
  <el-table-column prop="name" label="商品" width="120" />
  <el-table-column prop="price" label="单价" width="80" />
  <el-table-column prop="quantity" label="数量" width="80" />
  <el-table-column prop="total" label="总价" />
</el-table>

<script>
export default {
  methods: {
    customSummary({ columns, data }) {
      return columns.map((col, index) => {
        if (index === 0) return '合计'
        let allNaN = true
        let sum = 0
        data.forEach(item => {
          const num = Number(item[col.prop])
          if (!isNaN(num)) {
            allNaN = false
            sum += num
          }
        })
        return allNaN ? '' : sum
      })
    }
  }
}
</script>

行展开

通过 type="expand" 列开启行展开功能。

<el-table :data="tableData" border>
  <el-table-column type="expand">
    <template slot-scope="{ row }">
      <div class="expand-content">
        <p>姓名: {{ row.name }}</p>
        <p>邮箱: {{ row.email }}</p>
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="email" label="邮箱" />
</el-table>

默认展开所有行

通过 default-expand-all 属性默认展开所有行。

<el-table :data="tableData" border default-expand-all>
  <el-table-column type="expand">
    <template slot-scope="{ row }">
      <p>{{ row.name }} - {{ row.email }}</p>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

expandRowKeys 控制展开

通过 expand-row-keys 属性传入 key 数组控制哪些行展开，需配合 row-key 使用。

<el-table
  :data="tableData"
  border
  row-key="name"
  :expand-row-keys="expandedKeys"
>
  <el-table-column type="expand">
    <template slot-scope="{ row }">
      <p>{{ row.name }}</p>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

<script>
export default {
  data() {
    return {
      expandedKeys: ['张三', '王五']
    }
  }
}
</script>

自定义样式

支持通过函数动态设置行、单元格、表头的样式。

<el-table
  :data="tableData"
  border
  row-class-name="custom-row"
  :row-style="getRowStyle"
  :cell-class-name="getCellClass"
  :cell-style="getCellStyle"
  :header-row-class-name="headerRowClass"
  :header-row-style="headerRowStyle"
  :header-cell-class-name="getHeaderClass"
  :header-cell-style="getHeaderCellStyle"
>
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="age" label="年龄" width="80" />
</el-table>

<script>
export default {
  methods: {
    getRowStyle({ rowIndex }) {
      if (rowIndex === 0) return { fontWeight: 'bold' }
      return {}
    },
    getCellClass({ row, column }) {
      if (column.property === 'age' && row.age > 30) return 'age-high'
      return ''
    },
    getCellStyle({ row, column }) {
      if (column.property === 'age' && row.age > 30) return { color: '#f56c6c' }
      return {}
    },
    getHeaderCellStyle({ column }) {
      if (column.property === 'age') return { color: '#409eff' }
      return {}
    }
  }
}
</script>

自定义 formatter

formatter 函数的第 4 个参数为行索引 index。

<el-table :data="tableData" border>
  <el-table-column prop="name" label="姓名" width="120" :formatter="formatName" />
</el-table>

<script>
export default {
  methods: {
    formatName(row, column, cellValue, index) {
      return (index + 1) + '. ' + cellValue
    }
  }
}
</script>

单元格合并

通过 spanMethod 属性实现单元格合并。

<el-table :data="tableData" border :span-method="mergeMethod">
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="role" label="角色" width="100" />
  <el-table-column prop="email" label="邮箱" />
</el-table>

<script>
export default {
  methods: {
    mergeMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) return { rowspan: 2, colspan: 1 }
        if (rowIndex === 1) return { rowspan: 0, colspan: 0 }
      }
    }
  }
}
</script>

高亮当前行

通过 highlight-current-row 属性高亮当前选中行，配合 current-row-key 可通过 key 设置当前行。

<el-table
  :data="tableData"
  border
  highlight-current-row
  :current-row-key="currentKey"
  row-key="name"
  @current-change="onCurrentChange"
>
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="age" label="年龄" width="80" />
</el-table>

固定高度 / 最大高度

通过 height 设置固定高度，超出后纵向滚动（仅 body 滚动，表头固定）。通过 maxHeight 限制最大高度，内容少时不滚动。

<!-- 固定高度，超出滚动 -->
<el-table :data="tableData" border height="300">
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

<!-- 最大高度，内容少时不滚动 -->
<el-table :data="tableData" border max-height="300">
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

三种尺寸

通过 size 属性设置表格尺寸：medium / small / mini。

<el-table :data="tableData" border size="medium">
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

<el-table :data="tableData" border size="small">
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

<el-table :data="tableData" border size="mini">
  <el-table-column prop="name" label="姓名" width="120" />
</el-table>

隐藏表头

通过 show-header 属性隐藏表头行。

<el-table :data="tableData" border :show-header="false">
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="age" label="年龄" width="80" />
</el-table>

固定列

通过 el-table-column 的 fixed 属性将列固定在左侧或右侧，横向滚动时固定列保持不动。

<el-table :data="tableData" border height="300">
  <!-- 左固定 -->
  <el-table-column type="index" label="#" width="50" fixed="left" />
  <el-table-column prop="name" label="姓名" width="120" fixed="left" />

  <!-- 中间可滚动列 -->
  <el-table-column prop="age" label="年龄" width="80" />
  <el-table-column prop="email" label="邮箱" width="200" />
  <el-table-column prop="address" label="地址" width="300" />

  <!-- 右固定 -->
  <el-table-column prop="status" label="状态" width="80" fixed="right" />
  <el-table-column label="操作" width="140" fixed="right">
    <template slot-scope="{ row }">
      <el-button type="primary" size="mini">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

注意事项

  • fixed 支持 true、'left'、'right' 三种值，true 等价于 'left'
  • 固定列需要设置明确的 width，否则可能无法正确计算固定区域宽度
  • 固定列需要配合 height 或 maxHeight 使用才具有最佳体验
  • 同时使用左固定和右固定时，中间列需要足够多以使表格产生横向滚动
  • 多级表头（group header）也支持固定列，固定区域会包含对应的父级表头

多级表头

通过嵌套 el-table-column 实现复杂表头（多级表头）。

  • 父列不绑定 prop，只设置 label
  • 排序、筛选仅对叶子列（没有子列的列）生效
  • 多选（type="selection"）、展开（type="expand"）等特殊列建议放在最顶层
<template>
  <el-table :data="tableData" border>
    <el-table-column prop="date" label="日期" width="120" sortable />
    <el-table-column label="配送信息">
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column label="地址">
        <el-table-column prop="province" label="省份" width="80" />
        <el-table-column prop="city" label="城市" width="80" />
        <el-table-column prop="district" label="区县" width="80" />
      </el-table-column>
    </el-table-column>
    <el-table-column prop="remark" label="备注" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2024-01-15', name: '张三', province: '浙江', city: '杭州', district: '西湖区', remark: '已签收' },
        { date: '2024-01-16', name: '李四', province: '江苏', city: '南京', district: '鼓楼区', remark: '配送中' }
      ]
    }
  }
}
</script>

API

Table Attributes

属性说明类型默认值
data表格数据源array—
height表格固定高度，超出后 body 纵向滚动，表头固定string / number—
maxHeight表格最大高度，超出后 body 纵向滚动，表头固定string / number—
width表格宽度string / number—
size尺寸，可选值：medium / small / ministring—
border是否显示边框booleanfalse
stripe是否显示斑马纹booleanfalse
fit列宽是否撑满booleantrue
showHeader是否显示表头booleantrue
showSummary是否显示合计行booleanfalse
sumText合计行首列文本string合计
summaryMethod自定义合计方法function({ columns, data })—
rowKey行数据唯一标识字段，用于展开行和选中行string / function(row)—
rowClassName行 className，支持字符串或函数string / function({ row, rowIndex })—
rowStyle行内联样式，支持对象或函数object / function({ row, rowIndex })—
cellClassName单元格 classNamestring / function({ row, column, rowIndex, columnIndex })—
cellStyle单元格内联样式object / function({ row, column, rowIndex, columnIndex })—
headerRowClassName表头行 classNamestring / function({ row, rowIndex })—
headerRowStyle表头行内联样式object / function({ row, rowIndex })—
headerCellClassName表头单元格 classNamestring / function({ row, column, columnIndex })—
headerCellStyle表头单元格内联样式object / function({ row, column, columnIndex })—
highlightCurrentRow是否高亮当前行booleanfalse
highlightSelectionRow是否高亮选中行booleanfalse
currentRowKey当前行的 keystring / number—
defaultSort默认排序 { prop, order }object—
defaultExpandAll是否默认展开所有行booleanfalse
expandRowKeys默认展开行的 key 数组，需配合 row-key 使用array—
spanMethod合并单元格方法function({ row, column, rowIndex, columnIndex })—
tooltipEffecttooltip 主题stringdark
emptyText空数据文本string暂无数据

Table Events

事件名说明回调参数
select选中某行时触发selection, row
select-all全选/取消全选时触发selection
selection-change选中项发生变化时触发selection
cell-click点击单元格时触发row, column, cell, event
cell-dblclick双击单元格时触发row, column, cell, event
cell-mouse-enter鼠标移入单元格时触发row, column, cell, event
cell-mouse-leave鼠标移出单元格时触发row, column, cell, event
row-click点击行时触发row, column, event, index
row-dblclick双击行时触发row, column, event, index
row-contextmenu右键点击行时触发row, column, event, index
header-click点击表头时触发column, event
header-dblclick双击表头时触发column, event
header-contextmenu右键点击表头时触发column, event
sort-change排序发生变化时触发{ column, prop, order }
filter-change筛选条件发生变化时触发filters
current-change当前行发生变化时触发row, oldRow
expand-change展开行发生变化时触发row, expandedRows

Table Methods

方法名说明参数
toggleRowSelection切换某行的选中状态row, selected?
toggleAllSelection切换全选/取消全选—
clearSelection清空选中项—
toggleRowExpansion切换某行的展开状态row, expanded?
setCurrentRow设置当前行row
sort编程式排序prop, order
clearSort清除排序—
clearFilter清除筛选columnKeys?
doLayout重新布局—

Table Slots

插槽名说明作用域
empty自定义空数据内容—
expand展开行内容{ row, index }

TableColumn Attributes

属性说明类型默认值
type列类型：selection / index / expand / 普通列string—
prop字段名string—
label列标题string—
width列宽string / number—
minWidth最小列宽string / number—
align对齐方式：left / center / rightstringcenter
fixed固定列：left / rightstring / boolean—
sortable是否可排序boolean / customfalse
sortMethod自定义排序方法function(a, b)—
sortBy排序字段string / array / function(row)—
sortOrders排序顺序array['ascending', 'descending', null]
resizable是否可拖拽调整列宽booleantrue
formatter格式化内容，第 4 个参数为行索引function(row, column, cellValue, index)—
showOverflowTooltip溢出时显示 tooltipbooleanfalse
index自定义行号索引number / function(index)—
columnKey列唯一标识string—
className列 classNamestring—
labelClassName表头 classNamestring—
renderHeader自定义表头渲染函数function({ column, columnIndex })—
selectable仅对 type=selection 的列生效，行是否可选function(row, index)—
filters筛选项列表 [{ text, value }]array—
filterMultiple是否多选筛选booleantrue
filterMethod自定义筛选方法function(value, row)—
filterPlacement筛选下拉弹出位置string—
filteredValue默认筛选值array—

TableColumn Slot

插槽名说明作用域
default自定义列内容{ row, column, index }
09:41

移动端预览