Skip to content

网格组件

基于 Canvas 绘制实现的网格组件,支持单元格合并、单元格中绘制对角线等功能。

属性配置

配置说明
边框样式JSON 对象,配置边框的全局样式,示例:{"color":"#187FC8","width":2,"dash":""}
行样式JSON 对象,配置行的全局样式,示例:{"color":"#187FC8","width":2,"dash":""}
列样式JSON 对象,配置列的全局样式,示例:{"color":"#187FC8","width":2,"dash":""}
对角线样式JSON 对象,配置对角线的全局样式,示例:{"color":"#187FC8","width":2,"dash":""}

网格属性配置示意图

数据配置

配置说明
行数网格的行数,默认 5
列数网格的列数,默认 5
自动适应是否自适应容器尺寸
行高行高值(像素),默认 50
列宽列宽值(像素),默认 100
边框数组包含 4 个值,分别对应上、右、下、左边框,可单独配置样式
行高数组行高数组,用于为不同行设置不同的高度
列宽数组列宽数组,用于为不同列设置不同的宽度
行线数组行线的样式数组,可为不同行线单独配置样式
列线数组列线的样式数组,可为不同列线单独配置样式
合并数组合并单元格信息数组,每项格式:{row: 0, col: 0, rowSpan: 2, colSpan: 2},其中 row、col 从 0 开始
斜线数组绘制对角线的单元格数组,每项格式:{row: 0, col: 0, ...样式属性},row、col 从 0 开始,可单独带样式
单元数组单元格样式数组,每项格式:{row: 0, col: 0, ...样式属性},用于为特定单元格配置样式

网格数据配置示意图

基于 VitePress 构建