Appearance
Table 表格
用于展示结构化数据，内置分页、固定表头、横向/纵向滚动、列宽拖拽、自定义单元格等能力。列既可以用 columns 配置式声明，也可以用 <c-table-column> 子组件声明。
默认
total > 0时自动显示分页；也可通过show-pagination强制控制显隐。
基础用法
传入 columns（列定义）与 data（数据），用 v-model:currentPage / v-model:pageSize 双向绑定分页。
斑马纹与边框
stripe 开启斑马纹，border 显示边框。
高亮当前行
设置 highlight-current-row 后点击行会高亮，并可监听 row-click 事件获取当前行数据。
自定义列宽与对齐
在列定义中设置 width 与 align（left | center | right）控制列宽与对齐；align 默认 left。
不同尺寸
size 控制视觉密度，支持 small | medium | large。
固定表头与高度
height 设置可视高度（默认 300），内容超出时仅内容区滚动；sticky-header（默认开启）让表头保持固定。
横向滚动
scroll-x（默认开启）在列总宽超过容器时出现横向滚动条。鼠标移入表格底部即可拖动横向滚动条。
列宽拖拽
设置 column-resizable 开启列宽拖拽，min-column-width / max-column-width 限制范围（单位 px，仅支持像素宽度）。
自定义单元格插槽
每列以其 key 作为插槽名，可自定义单元格内容（如操作按钮、标签等）。插槽参数为 { row, index }。
使用子组件定义列
除 columns 配置外，也可用 <c-table-column> 子组件以声明式方式定义列（prop 对应字段、label 为表头）。同样支持与 prop 同名的插槽。
分页配置
通过 page-sizes、show-size-changer、show-total、total-text 自定义分页器；total-text 支持 {total} 占位符。
空数据
无数据时显示 empty-text 占位文案。
服务端分页
监听 pageChange，请求服务端数据后更新 data 与 total。下例用 setTimeout 模拟请求。
行与单元格类名
通过 row-class-name、cell-class-name、header-cell-class-name 为行 / 单元格 / 表头单元格动态添加类名（可为字符串或函数）。
API
Table Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 列定义（配置式） | TableColumn[] | [] |
| data | 表格数据 | any[] | [] |
| total | 数据总条数，用于分页计算 | number | 0 |
| current-page | 当前页（支持 v-model:currentPage） | number | 1 |
| page-size | 每页条数（支持 v-model:pageSize） | number | 10 |
| show-pagination | 是否显示分页（不设置时 total>0 自动显示） | boolean | undefined |
| page-sizes | 可选每页条数 | number[] | [10,20,50,100] |
| show-size-changer | 是否显示每页条数切换器 | boolean | true |
| show-total | 是否显示总条数 | boolean | true |
| total-text | 总条数文案模板，支持 {total} 占位符 | string | '总条数' |
| empty-text | 空数据占位文案 | string | '暂无数据' |
| row-key | 行唯一键字段名 | string | 'id' |
| size | 表格尺寸 | 'small' | 'medium' | 'large' | 'medium' |
| stripe | 是否显示斑马纹 | boolean | false |
| border | 是否显示边框 | boolean | false |
| highlight-current-row | 是否高亮点击的当前行 | boolean | false |
| row-class-name | 行类名 | string | ((row, index) => string) | undefined |
| header-cell-class-name | 表头单元格类名 | string | ((column, index) => string) | undefined |
| cell-class-name | 单元格类名 | string | ((row, column, rowIndex, colIndex) => string) | undefined |
| column-resizable | 是否开启列宽拖拽 | boolean | false |
| min-column-width | 最小列宽（px） | number | 60 |
| max-column-width | 最大列宽（px） | number | 600 |
| scroll-x | 是否启用横向滚动 | boolean | true |
| height | 可视高度，超出则内容区滚动 | number | string | 300 |
| max-height | 最大高度 | number | string | undefined |
| sticky-header | 是否固定表头 | boolean | true |
Table Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:currentPage | 当前页变更 | (page: number) |
| update:pageSize | 每页条数变更 | (size: number) |
| pageChange | 分页变化 | (page: number, size: number) |
| row-click | 点击某一行时触发 | (row: any, index: number) |
Table Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
[column.key] | 以列的 key 为名的自定义单元格内容 | { row, index } |
TableColumn（columns 项）
| 字段 | 说明 | 类型 |
|---|---|---|
| key | 字段名，同时作为插槽名 | string |
| title | 表头标题 | string |
| width | 列宽 | number | string |
| align | 单元格对齐 | 'left' | 'center' | 'right' |
| render | 自定义渲染函数 | (row, index) => any |
TableColumn 子组件 Props
配合 <c-table-column> 声明式使用：
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prop | 对应字段名（同时作为插槽名） | string | '' |
| label | 表头标题 | string | '' |
| width | 列宽 | number | string | undefined |
| align | 单元格对齐 | 'left' | 'center' | 'right' | 'left' |
| header-align | 表头对齐 | 'left' | 'center' | 'right' | undefined |
最佳实践
- 设置
row-key，为每行提供稳定唯一键，提升渲染稳定性。 - 列宽拖拽仅支持像素宽度（如
80或"120px"），百分比/自适应宽度无法拖拽。 - 服务端分页：通过
pageChange触发请求，响应后更新data与total。 - 大数据量：用分页控制单页行数；若需展示 500+ 行，建议自行集成虚拟列表。