VTable-Sheet 样式配置指南

VTable-Sheet 提供了丰富的样式配置选项，使您能够根据需求自定义表格的外观。本指南将详细介绍如何通过 theme 配置来调整表格样式。

主题配置入口

在 VTable-Sheet 中，样式可通过全局 theme 属性进行配置，也可以通过 sheet 的 theme 属性进行配置。

如果同时配置了全局和sheet的 theme 属性，则以sheet的 theme 为准。

以下是一个基本的主题配置示例：

const options = {
  // 其他配置...
  theme: {
    rowSeriesNumberCellStyle: {
      // 行序号单元格样式
    },
    colSeriesNumberCellStyle: {
      // 列序号单元格样式
    },
    menuStyle: {
      // 菜单样式
    },
    tableTheme: {
      // 表格主题
    }
  }
};

主题配置详解

行序号和列序号单元格样式

您可以通过 rowSeriesNumberCellStyle 和 colSeriesNumberCellStyle 来定制行列序号的样式：

theme: {
  rowSeriesNumberCellStyle: {
    bgColor: '#f5f5f5',
    fontSize: 12,
    fontFamily: 'Arial',
    color: '#333333',
    textAlign: 'center',
    textBaseline: 'middle'
  },
  colSeriesNumberCellStyle: {
    bgColor: '#f5f5f5',
    fontSize: 12,
    fontFamily: 'Arial',
    color: '#333333',
    textAlign: 'center',
    textBaseline: 'middle'
  }
}

菜单样式配置

menuStyle 属性用于配置表格相关菜单的样式（待实现！）：

theme: {
  menuStyle: {
    fontFamily: 'Arial',
    fontSize: 12,
    color: '#333333',
    padding: [8, 16, 8, 16], // 上、右、下、左内边距
    bgColor: '#ffffff'
  }
}

表格主题配置

tableTheme 是 VTable-Sheet 的表格区域样式配置，它完全对应于 VTable 的主题系统，具体参考：VTable 主题配置。

不过需要注意的事，会自动忽略 tableTheme 中的 frameStyle 样式。

其中，VTable中的内置主题如ARCO，DARK ARCO等，也同样适用。

自定义主题示例

下面是一个完整的主题配置示例，展示了如何创建一个自定义的 VTable-Sheet 主题：