VTable表格组件如何自定义高亮部分单元格？问题标题 VTable表格组件如何自定义高亮部分单元格？问题描述使用V

问题标题

VTable表格组件如何自定义高亮部分单元格？

问题描述

使用VTable表格组件，如何自定义高亮部分单元格，并指定高亮的样式？

解决方案

VTable支持自定义单元格样式，可以用来实现自定义高亮功能：

注册样式

首先需要注册一个自定义样式

需要定义id和style两个属性：

id: 自定义样式的唯一id
style: 自定义单元格样式，与column中的style配置相同，最终呈现效果是单元格原有样式与自定义样式融合

自定义样式的注册分为两种方式，option中配置和使用API配置：

option option中的customCellStyle属性接收多个自定义样式对象组合而成的数组：

// init option
const option = {
  // ......
  customCellStyle: [
    {
      id: 'custom-1',
      style: {
        bgColor: 'red'
      }
    }
  ]
}

API 可以通过VTable实例提供的registerCustomCellStyle方法注册自定义样式：

instance.registerCustomCellStyle(id, style)

分配样式

使用已注册的自定义样式，需要将自定义样式分配到单元格中，分配需要定义cellPosition和customStyleId两个属性：

cellPosition: 单元格位置信息，支持配置单个单元格与单元格区域
- 单个单元格：{ row: number, col: number }
- 单元格区域：{ range: { start: { row: number, col: number }, end: { row: number, col: number} } }
customStyleId: 自定义样式id，与注册自定义样式时定义的id相同

分配方式有两种，option中配置和使用API配置：

option option中的customCellStyleArrangement属性接收多个自定义分配样式对象组合而成的数组：

// init option
const option = {
  // ......
  customCellStyleArrangement: [
    {
      cellPosition: {
        col: 3,
        row: 4
      },
      customStyleId: 'custom-1'
    },
    {
      cellPosition: {
        range: {
          start: {
            col: 5,
            row: 5
          },
          end: {
            col: 7,
            row: 7
          }
        }
      },
      customStyleId: 'custom-2'
    }
  ]
}

API 可以通过VTable实例提供的arrangeCustomCellStyle方法分配自定义样式：

instance.arrangeCustomCellStyle(cellPosition, customStyleId)

更新与删除样式

自定义样式在注册后，可以通过registerCustomCellStyle方法，对同一id的自定义样式进行更新，更新后，分配的自定义样式的单元格样式会被更新；如果newStyle为undefined | null，则表示删除该自定义样式，删除后，分配的自定义样式的单元格样式会还原默认样式

instance.registerCustomCellStyle(id, newStyle)

已分配的自定义样式的单元格区域，可以通过arrangeCustomCellStyle方法，对单元格区域进行更新样式分配，更新后，单元格的样式会被更新；如果customStyleId为undefined | null，则表示还原单元格的样式为默认样式

代码示例

demo：visactor.io/vtable/demo…

VTable表格组件如何自定义高亮部分单元格？

问题标题

问题描述

解决方案

注册样式

分配样式

更新与删除样式

代码示例

相关文档