!!!###!!!title=29. VTable使用问题:如何获取表格总行数和内容实际高度——VisActor/VTable FAQ 文档!!!###!!!!!!###!!!description=---title: 7. VTable使用问题:如何获取表格总行数和内容实际高度</br>key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM--- !!!###!!!

问题标题

如何获取表格总行数和内容实际高度

问题描述

如何通过API,从表格实例中获取当前表格总行数和内容实际高度

解决方案

  • table实例中colCountrowCount属性,可以获取当前表格的行列数量
  • table示例提供方法getAllRowsHeightgetAllColsWidth,可以获取当前表格内容的总列宽和总行高

代码示例

const tableInstance = new VTable.ListTable(container, option);

console.log(tableInstance.colCount);
console.log(tableInstance.rowCount);
console.log(tableInstance.getAllRowsHeight());
console.log(tableInstance.getAllColsWidth());</br>

结果展示

完整示例代码(可以粘贴到 编辑器 上尝试一下):

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"
    },
    {
        "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"
    },
    {
        "field": "City",
        "title": "City",
        "width": "auto"
    },
    {
        "field": "Order Date",
        "title": "Order Date",
        "width": "auto"
    },
    {
        "field": "Quantity",
        "title": "Quantity",
        "width": "auto"
    },
    {
        "field": "Sales",
        "title": "Sales",
        "width": "auto"
    },
    {
        "field": "Profit",
        "title": "Profit",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard'
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;

console.log(tableInstance.colCount);
console.log(tableInstance.rowCount);
console.log(tableInstance.getAllRowsHeight());
console.log(tableInstance.getAllColsWidth());
    })</br>

相关文档

相关api:
https://www.visactor.io/vtable/api/Properties#rowCount
https://www.visactor.io/vtable/api/Properties#colCount
https://www.visactor.io/vtable/api/Methods#getAllColsWidth
https://www.visactor.io/vtable/api/Methods#getAllRowsHeight
github:https://github.com/VisActor/VTable