Skip to content

    Table 表格增强

    项目内置了 markdown 原生表格增强能力,无需额外引入组件。

    • 自动包裹滚动容器,超出正文可左右滑动。
    • 表格后方提供 复制 Markdown复制 HTML复制样式 HTML 三个按钮。
    • 支持显式合并语法:[[colspan:N]][[rowspan:N]]
    • 支持 :::table{...} 指令,按表格粒度控制复制按钮和矩阵样式。

    表格指令参数

    Markdown
    :::table{copy="markdown styled-html" matrix=true}
    | A | B | C |
    | --- | --- | --- |
    | 1 | 2 | 3 |
    | 4 | 5 | 6 |
    :::

    可用参数:

    • copy=all:显示全部复制按钮,默认值。
    • copy=none:不显示任何复制按钮。
    • copy="markdown html":只显示指定按钮,支持 markdownhtmlstyled-html,可空格或逗号分隔。
    • matrix=true:按并列表格渲染,不对 th 做首行/首列强调样式。
    • matrix=false:保持普通表头样式,默认值。

    基础语法(真实渲染)

    组件功能备注
    Code代码高亮、复制、行号支持路径与语言标签
    FileTree目录结构展示支持文件/文件夹链接
    Toast全局反馈提示默认 5s 自动关闭
    Markdown
    | 组件 | 功能 | 备注 |
    | --- | --- | --- |
    | Code | 代码高亮、复制 | 支持路径与语言标签 |
    | Toast | 反馈提示 | 右下角堆叠 |

    合并单元格(真实渲染)

    • [[colspan:N]]:当前单元格向右合并 N 列(包含自身)。
    • [[rowspan:N]]:当前单元格向下合并 N 行(包含自身)。
    • 合并标记是显式关键字,不占用常见 markdown 对齐符号,冲突概率更低。
    • 被覆盖的单元格内容会被忽略,建议留空。
    ABCD
    [[colspan:3]]数据1数据2数据3
    [[rowspan:2]] 分组数据4数据5数据6
    数据7数据8数据9
    E数据4数据5数据6
    Markdown
    | A | B | C | D |
    | --- | --- | --- | --- |
    | [[colspan:3]] | 数据1 | 数据2 | 数据3 |
    | [[rowspan:2]] 分组 | 数据4 | 数据5 | 数据6 |
    |  | 数据7 | 数据8 | 数据9 |
    | E | 数据4 | 数据5 | 数据6 |

    复制说明

    • 复制 Markdown:导出当前表格内容为 markdown 源码。
    • 复制 HTML:导出当前表格的 HTML 结构代码。
    • 复制样式 HTML:导出包含内联样式的 HTML(粘贴后保留完整边框和表格样式)。

    并列表格示例(无首行首列强调)

    下面这个表格是实际渲染结果:没有任何复制按钮,同时关闭了首行 / 首列强调样式。

    阶段一阶段二阶段三
    需求开发发布
    调研联调复盘

    最后更新于: