VTable表格组件如何设置文字样式？问题标题 VTable表格组件如何设置文字样式？问题描述使用VTable表格组

问题标题

VTable表格组件如何设置文字样式？

问题描述

使用VTable表格组件，支持哪些文字样式，如何配置？

解决方案

VTable支持的文字样式有：

fontSize: 文本的字体大小。
fontFamily: 文本使用的字体。可以指定多个字体，例如Arial,sans-serif，浏览器将按照指定顺序查找使用。
fontWeight: 设置字体粗细。
fontVariant: 设置字体变体。
fontStyle: 设置字体样式。

VTable支持设置文字样式的地方有：

column(row/indicator)中，配置该列（行/指标）对应的样式
- style: 内容单元格对应的样式
- headerStyle: 表头单元格对应的样式
theme中，配置主题样式
- defaultStyle: 默认样式
- bodyStyle: 表格内容区域样式
- headerStyle: 表头（列表）/列表头（透视表）样式
- rowHeaderStyle: 行表头样式
- cornerHeaderStyle: 角头样式
- bottomFrozenStyle: 底部冻结单元格样式
- rightFrozenStyle: 右侧冻结单元格样式

代码示例

可以粘贴到官网编辑器上进行测试：visactor.io/vtable/demo…

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[    {        "field": "Order ID",        "title": "Order ID",        "width": "auto",        style: {            fontSize: 14        },        headerStyle: {            fontSize: 16,            fontFamily: 'Verdana'        }    },    {        "field": "Customer ID",        "title": "Customer ID",        "width": "auto"    },    {        "field": "Product Name",        "title": "Product Name",        "width": "auto"    },    {        "field": "Category",        "title": "Category",        "width": "auto"    },    {        "field": "Sub-Category",        "title": "Sub-Category",        "width": "auto"    },    {        "field": "Region",        "title": "Region",        "width": "auto"    }];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  theme: VTable.themes.DEFAULT.extends({
    bodyStyle: {
        fontSize: 12
    },
    headerStyle: {
        fontSize: 18
    }
  })
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })

VTable表格组件如何设置文字样式？

问题标题

问题描述

解决方案

代码示例

相关文档