更新记录

0.1.0（2026-09-28） 下载此版本

• 初版 nax-table（uni-app x / 蒸汽模式），columns + data 数据驱动的数据表格
• 列类型 text / index / operation / selection；stripe 斑马纹、border 单元格边框、highlight 行点击高亮
• 固定表头（表头位于纵向滚动区外，height 有值时表体独立滚动）+ 列宽超出容器时横向滚动
• 文本列 lines 多行省略、emptyString 空值占位、formatter 自定义单元格文本、align / headerAlign 对齐、color 单元格文字色
• 排序：sorter: true 组件内部排序（受控外观 + sort-change）/ sorter: 'custom' 仅 emit sort-change 由业务处理
• 多选：type: 'selection' 表头全选 / 半选 + selection-change；列 selectable 控制行是否可勾选（禁用行不参与全选）
• 合计行 showSummary / sumText / summaryMethod（cell 支持 colspan 跨列）、分组表头 groupTitle（相邻同名合并）
• 分页 showPaging（inner 组件切片 / outer 受控 + page-change）、加载更多 showLoadMore / finished + load-more
• 固定列 fixed（左侧覆盖层 + 主区 @scroll 纵向单向同步）、虚拟滚动 virtual + rowH（spacer 占位 + 窗口裁剪）
• 可编辑单元格 editable（cell-edit 提交，组件不修改 data）；行焦点 row-blur；操作列 renders + action
• 实例方法：resetHighlight / clearSelection / toggleRowSelection / toggleAllSelection / clearSort / resetPage
• 依赖 nax-empty、nax-icon、nax-ui-theme

平台兼容性

uni-app x(4.25)

其他

nax-table 表格

nax-ui 数据表格组件（uni-app x / 蒸汽模式）。columns + data 数据驱动，支持斑马纹、边框、固定表头、横向滚动、排序、行数省略、空态与操作列。

引入

easycom 自动注册，页面直接使用 <nax-table />，无需 import。

基础用法

<template>
    <nax-table :data="list" :columns="cols" stripe border @row-click="onRow"></nax-table>
</template>

<script setup>
    import { NaxTableColumn } from '@/uni_modules/nax-table/components/nax-table/table-types.uts'

    const cols = [
        new NaxTableColumn({ name: 'name', label: '姓名', width: '90' }),
        new NaxTableColumn({ name: 'age', label: '年龄', width: '70', sorter: true }),
        new NaxTableColumn({ label: '#', type: 'index', width: '50' })
    ]
    const list = [
        { name: '张三', age: 24 },
        { name: '李四', age: 31 }
    ]
</script>

列类型

分组表头

列配置 groupTitle 相邻相同即合并为一组（一级分组）；无 groupTitle 的列不参与分组行。

Props

NaxTableColumn

NaxTableOperation

Events

Slots

实例方法（ref）

通过组件 ref 调用（uts 下需在业务侧声明 expose 类型）：

主题

通过 CSS 变量覆盖：

依赖

• nax-empty（空态占位）
• nax-icon（多选勾选 / 半选标记）
• nax-ui-theme（可选 token）

平台兼容

注意事项

• 表头位于纵向滚动区之外，height 有值时表体独立滚动，表头天然固定
• 列总宽超出容器时横向滚动（外层 scroll-view scroll-x），指定了 width 的列不参与均分
• 排序为受控外观：sorter: true 时组件内部维护排序状态并按其渲染 viewData（数值列按数值、字符串列按码点比较）；sorter: 'custom' 时组件不排序、只 emit sort-change（source='custom'），业务也可完全自行处理 sort-change 后替换 data
• max-lines 省略依赖文本节点能力，跨端表现以 nax-text 同源机制为准
• 合计行默认对「全为数值的 text 列」自动求和（保留 2 位）；非数值列留空；summaryMethod 传入后完全由业务控制，colspan 可跨列（跨列样式按列宽求和 / flex 计数展开）
• pagingMode=inner 时 data 传全量、组件按 pageSize 切片；outer 时仅展示当前页数据 + emit page-change 由业务请求
• 多选状态按 data 绝对下标维护，data 替换或翻页会自动清空；虚拟滚动换窗不影响已选状态；列配置 selectable 返回 false 的行勾选框置灰、不可勾选、不参与全选
• 可编辑单元格：组件不直接修改 props.data，提交 cell-edit 后由业务更新数据源；dataType: 'number' 提交时自动转数值（解析失败回退原值）；编辑态为单例（同时只有一个单元格在编辑）
• 行焦点转移：row-blur 在点击另一行/单元格时对上一活跃行触发；App 端无 hover/焦点概念，为活跃行切换的近似语义

固定列（v3）

• 列配置 fixed: true 即固定在左侧；必须显式指定 width（未指定按 100px 处理）
• 实现为独立覆盖层（absolute 定位 + z-index）：fixed 列渲染在覆盖层，主区对应槽位 visibility: hidden 让位，横向滚动时主区从覆盖层下方穿过
• 表体纵向同步：主区 @scroll 把 scrollTop 单向同步给固定列表体（无回环）；height 未设置时（无纵向滚动）两侧自然对齐
• 序号列（index）显示的行号、多选状态、事件 index 均为 data 绝对下标，滚动/裁剪/分页下保持一致
• 与分组表头组合时分组行暂不支持（分组行仍按主区全列渲染，覆盖层不含分组行）；建议固定列与分组表头二选一

虚拟滚动（v3）

• virtual: true + height + 固定 rowH（默认 44px）三者配合使用；行高不固定时不要开启
• 实现为上下 spacer 占位 + 窗口裁剪（可见区 ± 5 行），与 nax-virtual-list 同思路
• 与 showPaging(inner) 组合时窗口重置到当前页头部；与多选组合时选择按绝对下标维护