!!!###!!!title=快速上手——VisActor/VTable 教程文档!!!###!!!!!!###!!!description=在本教程中,我们将介绍如何使用 VTable 绘制一个简单的基本表格。VTable 是一款简单易用、高性能、可视化类型丰富的前端可视化表格库。!!!###!!!

快速上手

在本教程中,我们将介绍如何使用 VTable 绘制一个简单的基本表格。VTable 是一款简单易用、高性能、可视化类型丰富的前端可视化表格库。

获取 VTable

你可以通过以下几种方式获取 VTable。

使用 NPM 包

首先,你需要在项目根目录下使用以下命令安装 VTable:

# 使用 npm 安装
npm install @visactor/vtable

# 使用 yarn 安装
yarn add @visactor/vtable

使用 CDN

你还可以通过 CDN 获取构建好的 VTable 文件。

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>
  const tableInstance = new VTable.ListTable(option);
</script>

引入 VTable

通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 VTable:

import * as VTable from '@visactor/vtable';

or;

import { ListTable, PivotTable, TYPES, themes } from '@visactor/vtable';

使用 script 标签引入

通过直接在 HTML 文件中添加 <script> 标签,引入构建好的 vtable 文件:

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>
  const tableInstance = new VTable.ListTable(option);
</script>

绘制一个简单的表格

在绘图前我们需要为 VTable 准备一个具备高宽的 DOM 容器。

<body>
  <div id="tableContainer" style="width: 600px;height:400px;"></div>
</body>

接下来,我们创建一个 Vtable.ListTable 实例,传入表格配置项:

至此,你已经成功绘制出了一个简单的表格!

希望这篇教程对你学习如何使用 VTable 有所帮助。接下来可以深入了解 VTable 的各种配置选项,定制出更加丰富多样的表格效果。