最新版本v1.0.60
Table 表格 - 对齐方式
通过列配置中的 align 和 headerAlign 属性控制表格内容和表头的对齐方式。
基础对齐
通过列配置的 align 属性设置内容对齐方式,支持 left(默认)、center、right 三种。
基础对齐
表头独立对齐
通过 headerAlign 属性可以单独设置表头的对齐方式,使其与内容对齐方式不同。如果不设置 headerAlign,表头默认跟随 align。
表头与内容分别对齐
全部居中
将所有列的 align 设为 center 即可实现全表居中对齐。
全部居中
数值右对齐
对于数量、金额等数值列,推荐使用右对齐,便于按位数对比大小。
数值右对齐
混合对齐
实际场景中,不同列通常需要不同的对齐方式——状态列居中、数值列右对齐、文本列左对齐。
混合对齐
API
TableColumn 对齐属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| align | 列内容对齐方式 | 'left' | 'center' | 'right' | 'left' |
| headerAlign | 表头对齐方式(不设置时跟随 align) | 'left' | 'center' | 'right' | 'left' |
对齐方式说明
| 值 | 说明 | 适用场景 |
|---|---|---|
left | 左对齐(默认) | 文本类内容(姓名、地址、描述等) |
center | 居中对齐 | 状态标签、等级、操作按钮等 |
right | 右对齐 | 数值类内容(金额、数量、分数等) |
最佳实践
- 数值列右对齐:金额、数量等数值数据右对齐,方便用户按位数快速对比。
- 状态列居中:状态标签、图标等短内容居中显示更美观。
- 文本列左对齐:姓名、地址等长文本保持左对齐,符合阅读习惯。
- 表头居中:即使内容列有不同对齐,表头统一居中通常视觉效果更好——可使用
headerAlign: 'center'搭配不同align。