Table 表格

基于 Element Plus el-table 的列配置驱动表格，支持插槽列、render 列、多级表头和可选分页。

基础用法

使用 `columns` 配置快速渲染表格，支持 slot 列。

<template>
  <hx-table :data="data" :columns="columns" border stripe>
    <template #status="{ row }">
      <span :style="{ color: row.status === 'active' ? '#67c23a' : '#f56c6c' }">
        {{ row.status }}
      </span>
    </template>
  </hx-table>
</template>

<script setup lang="ts">
import { HxTable as Table } from "@whhx/ui"

const data = [
  { id: 1, name: 'Alice', dept: 'R&D', status: 'active' },
  { id: 2, name: 'Bob', dept: 'Design', status: 'inactive' },
]

const columns = [
  { type: 'index', width: 60, label: '#' },
  { prop: 'name', label: '姓名', minWidth: 120 },
  { prop: 'dept', label: '部门', minWidth: 140 },
  { prop: 'status', label: '状态', slot: 'status', minWidth: 120 },
]
</script>

操作列

当定义 #action 插槽时，会自动生成右侧操作列。

当提供 `#action` 插槽时，组件自动追加“操作列”。

<template>
  <hx-table :data="data" :columns="columns" border>
    <template #action="{ row }">
      <el-button link type="primary">编辑 {{ row.name }}</el-button>
    </template>
  </hx-table>
</template>

<script setup lang="ts">
import { HxTable as Table } from "@whhx/ui"

const data = [
  { id: 1, name: 'Alice', dept: 'R&D' },
  { id: 2, name: 'Bob', dept: 'Design' },
]

const columns = [
  { prop: 'name', label: '姓名', minWidth: 120 },
  { prop: 'dept', label: '部门', minWidth: 140 },
  { label: '操作', width: 120, fixed: 'right', slot: 'action' },
]
</script>

前端分页

设置 frontPagination 后，会对传入 data 自动切片。

启用 `frontPagination` 后，按 `currentPage/pageSize` 对 data 切片。

共 6 条

• 1
• 2

前往

页

<template>
  <div style="height: 500px; display: flex; flex-direction: column;">
    <hx-table
      :data="data"
      :columns="columns"
      show-pagination
      front-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      border
      height="400px"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxTable as Table } from "@whhx/ui"

const currentPage = ref(1)
const pageSize = ref(5)

const data = [
  { name: 'User-1', dept: 'A' },
  { name: 'User-2', dept: 'A' },
  { name: 'User-3', dept: 'B' },
  { name: 'User-4', dept: 'B' },
  { name: 'User-5', dept: 'C' },
  { name: 'User-6', dept: 'C' },
]

const columns = [
  { type: 'index', width: 60, label: '#' },
  { prop: 'name', label: '姓名' },
  { prop: 'dept', label: '部门' },
]
</script>

API

Props

名称	说明	类型	默认值
columns	列配置	TableColumn[]	[]
data	表格数据	any[]	[]
action-column-props	操作列额外属性（有 #action 时生效）	Record<string, any>	{ width: 180, fixed: 'right' }
show-pagination	是否显示分页	boolean	false
current-page	当前页码，支持 v-model	number	1
page-size	每页数量，支持 v-model	number	10
page-sizes	可选每页条数	number[]	[10,20,50,100]
total	总条数（后端分页时使用）	number	0
pagination-layout	分页布局	string	'total, sizes, prev, pager, next, jumper'
front-pagination	是否启用前端分页切片	boolean	false

其余 el-table 原生属性与事件通过 $attrs 全量透传，例如 border、stripe、row-key、@selection-change 等。

Events

事件名	说明	回调参数
size-change	每页数量变化	(size: number) => void
current-change	当前页变化	(page: number) => void
update:current-page	v-model 当前页更新	(page: number) => void
update:page-size	v-model 每页数量更新	(size: number) => void

Slots

插槽名	说明
action	操作列插槽，自动渲染右侧“操作”列
append	透传 el-table append 插槽
empty	透传 el-table empty 插槽
自定义列名	对应 columns[].slot 的单元格插槽
自定义表头插槽	对应 columns[].headerSlot 的表头插槽