57. 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: 右侧冻结单元格样式

代码示例

可以粘贴到官网编辑器上进行测试：https://visactor.io/vtable/demo/table-type/list-table

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;
    })</br>

问题标题

问题描述

解决方案

代码示例

相关文档