TanstackTable

table 表格只能用于处理简单的列表展示。如果牵涉到复杂的功能比如：展开、选择等等，优先使用 TanstackTable。TanstackTable 是使用 TanStack-Table 实现。

安装

使用之前需要先安装 TanStack-Table

npm install @tanstack/vue-table

演示

基础用法

展示一个简单的表格

固定表头和列

• 固定表头: 给表格设置 max-height 样式，然后设置 fixed-head 属性为 true 即可实现固定表头
• 固定列: 给列设置 size 列宽，然后给需要固定的列, 配置 fixed 取值为: left、right

选中行(多选)

通过将第一列配置 type=selection 让行变为可选的

选中行(单选)

同多选一样配置一列 type: 'selection'，然后设置表格属性 multi-selection=false 单选

排序

对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮。当 sorter 为 true 时使用默认排序规则；当 sorter 为函数 (rowA, rowB) => number 时使用自定义排序规则。

表头分组

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

通过在配置表头的 columns[n] 内嵌 columns 属性，实现多级表头。

树形数据

表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格

当前树形展开选择时存在bug: 选中状态不正确

展开行

当表格内容较多不能一次性完全展示时。可以使用 Table 展开行功能。

通过配置表格的 expandable 对象属性可以开启展开行功能。

API

TanstackTable Props

参数	说明	类型	默认值
stripe	是否为斑马纹	boolean	true
border	是否显示四周边框	boolean	false
columns	表格列配置	ColumnDef	[]
table-layout	表格布局	fixed | auto	auto
data	表格数据	any[]	[]
fixed-head	是否固定表头	boolean	false
multi-selection	当配置列为可选择时，是否允许多选	boolean	true
default-sorter	默认排序字段	{ id: string, desc: boolean }	-
expandable	配置展开属性	ExpandableOption	-

TanstackTable ColumnDef

参数	说明	类型	默认值
title	列标题	string	-
header	表头, 如果为空，但是设置了 title，则会使用 title 作为表头	string | ((opts: { table: Table<T> }) => VNode | string)	-
accessorKey	对应数据对象的 key; 如果没有配置 cell 将会使用该 key 对象的数据值渲染单元格	string	-
key	对应数据对象的 key; 同 accessorKey	string	-
id	列唯一标识, 如果未传, 但是传了 key 或者 accessorKey 将会以此作为 id；如果传了 header 是字符串，将会以 header 作为此 id	string	-
size	列宽	number	-
fixed	是否固定列	left | right	-
type	列类型, 配置列可选择时使用	selection	-
sorter	排序	boolean | ((rowA: T, rowB: T) => number)	-
cell	单元格渲染函数; 如果不配, 将会使用配置的 key 对应的值渲染单元格	(row: T, index: number, info: CellContext<T, unknown>) => VNode | VNode[] | string	-
columns	子列, 通常用于配置表头分组	ColumnDef[]	-

TanstackTable ExpandableOption

参数	说明	类型	默认值
rowExpandable	设置是否允许行展开	(row: T) => boolean	-
expandedRowRender	展开行渲染函数	(row: T) => VNode | VNode[]	-