Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。基于 Element Plus Table 组件扩展，支持通过配置式方式定义表格列。

类型定义

import type { TableColumnCtx } from 'element-plus'
import type { DefaultRow } from 'element-plus/es/components/table/src/table/defaults.mjs'
import type { VNode } from 'vue'

export interface TableColumnProps<T extends DefaultRow = DefaultRow> extends Partial<Omit<TableColumnCtx<T>, 'children'>> {
  key?: string
  customRender?: (text: any, record: T, column: TableColumnProps<T>) => string | VNode | undefined
  children?: TableColumnProps<T>[]
}

export interface TableCellProps {
  scope: {
    row: DefaultRow
    column: TableColumnCtx<DefaultRow>
    $index: number
  }
  column: TableColumnProps
}

export interface EkTableInstance {
  getSelectionRows: () => DefaultRow[]
  clearSelection: () => void
  toggleAllSelection: () => void
  toggleRowSelection: (row: DefaultRow, selected?: boolean) => void
}

基础用法

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  {
    prop: 'action',
    label: '操作',
    customRender: (text, record) => '编辑'
  }
]

const tableData = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 20 }
]

const selection = ref([])
</script>

<template>
  <EkTable
    v-model:selection="selection"
    :columns="columns"
    :data="tableData"
  />
</template>

Table 属性

属性名	说明	类型	默认值
columns	表格列的配置描述	TableColumnProps[]	[]
data	显示的数据	DefaultRow[]	[]
row-key	行数据的 Key，用来优化 Table 的渲染	string	'id'
v-model:selection	选中行的数据（双向绑定）	DefaultRow[]	[]

TIP

其他属性继承自 Element Plus 的 Table 组件。表格默认开启 border 和 stripe 样式。

TableColumn 属性

属性名	说明	类型	默认值
key	列的唯一标识，用于优化渲染	string	—
prop	对应列内容的字段名	string	—
label	显示的标题	string	—
width	对应列的宽度	string / number	—
align	对齐方式	'left' / 'center' / 'right'	'center'
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据	boolean	true
customRender	自定义渲染函数	(text: any, record: T, column: TableColumnProps<T>) => string | VNode | undefined	—
children	嵌套列配置（用于多级表头）	TableColumnProps[]	—

TIP

其他属性继承自 Element Plus 的 TableColumn 组件，如 sortable、filterable、fixed 等。

Table 事件

事件名	说明	回调参数
selection-change	当选择项发生变化时会触发该事件	selection: DefaultRow[]

TIP

其他事件继承自 Element Plus 的 Table 组件。

Table 方法

通过 ref 获取组件实例后可调用以下方法：

方法名	说明	参数	返回值
getSelectionRows	返回当前选中的行	—	DefaultRow[]
clearSelection	清空选中项	—	void
toggleAllSelection	切换全选状态	—	void
toggleRowSelection	切换某一行的选中状态	row: DefaultRow, selected?: boolean	void

Table 插槽

插槽名	说明	参数
bodyCell	自定义单元格内容	{ scope, column }
headerCell	自定义表头内容	{ scope, column }
expandCell	自定义展开行内容	{ scope, column }
filterIconCell	自定义筛选图标	{ scope, column }
empty	空数据时的内容	—
append	插入至表格最后一行后	—

插槽示例

<template>
  <EkTable :columns="columns" :data="tableData">
    <!-- 自定义单元格内容 -->
    <template #bodyCell="{ scope, column }">
      <div v-if="column.prop === 'status'">
        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
          {{ scope.row.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </div>
    </template>

    <!-- 自定义表头 -->
    <template #headerCell="{ column }">
      <span v-if="column.prop === 'name'">
        <el-icon><User /></el-icon>
        {{ column.label }}
      </span>
    </template>
  </EkTable>
</template>