演示三级样式系统:全局样式 → 列级样式 → 单元格样式,优先级依次递增
全局
通过 headerStyle / cellStyle 设置所有单元格的基础样式
列级
通过列配置的 style / headerStyle 覆盖特定列
单元格
通过 { value, style } 数据格式覆盖特定单元格
优先级:单元格 > 列级 > 全局(高优先级样式属性会覆盖低优先级的同名属性)
全局
使用 headerStyle 和 cellStyle 为所有表头和数据单元格设置统一样式。
| 姓名 | 部门 | 薪资 |
|---|---|---|
| 张三 | 技术部 | 15000 |
| 李四 | 市场部 | 12000 |
| 王五 | 财务部 | 13000 |
| 赵六 | 技术部 | 16000 |
列级
在列配置中使用 style 为不同列设置独立样式,如数字格式、对齐方式、列宽等。
| 产品名称 | 价格 | 库存 | 状态 |
|---|---|---|---|
| 笔记本电脑 | 8999.00 | 120 | 在售 |
| 无线鼠标 | 199.00 | 500 | 在售 |
| 机械键盘 | 599.00 | 80 | 促销 |
| 显示器 | 2499.00 | 45 | 缺货 |
单元格
使用 { value, style } 格式为特定单元格设置条件样式——分数 ≥ 90 绿色高亮,分数 < 60 红色警告。
| 学生姓名 | 语文 | 数学 | 英语 |
|---|---|---|---|
| 陈一 | 95 | 78 | 92 |
| 刘二 | 72 | 55 | 81 |
| 周三 | 48 | 96 | 59 |
| 吴四 | 85 | 88 | 91 |
全局 列级 单元格 综合演示:全局设定基础样式 → 列级覆盖对齐和数字格式 → 单元格级别标记负数为红色、合计行为灰底加粗。
| 科目 | 一月 | 二月 | 三月 | 合计 |
|---|---|---|---|---|
| 销售收入 | 50000.00 | 62000.00 | 58000.00 | 170000.00 |
| 运营成本 | -30000.00 | -35000.00 | -32000.00 | -97000.00 |
| 市场费用 | -8000.00 | -10000.00 | -9000.00 | -27000.00 |
| 净利润 | 12000.00 | 17000.00 | 17000.00 | 46000.00 |
全局
使用 export_table() 对页面上的 HTML 表格进行样式化导出,通过 headerStyle 和 cellStyle 参数定义导出样式。
| 项目名称 | 负责人 | 进度 | 截止日期 |
|---|---|---|---|
| 官网重构 | 张三 | 85% | 2025-03-15 |
| 移动端适配 | 李四 | 60% | 2025-04-01 |
| 数据看板 | 王五 | 30% | 2025-05-20 |
| API 网关升级 | 赵六 | 95% | 2025-02-28 |