antV + VUE3 基础实现

1. 首先安装依赖

 pnpm add @antv/s2@next @antv/s2-vue@next ant-design-vue@3.x

2. 创建一个挂载节点

<template>
  <div :style="getBackgroundStyle(chartConfig.option.background)">
    <div :id="'tableSheet_' + props.chartConfig.id" />
  </div>
</template>

3. 通过id对该节点创建dom

const container = document.getElementById('tableSheet_' + props.chartConfig.id);

4.创建s2DataConfig (放表格数据)，s2Options(放表格样式)

const s2DataConfig = {}
const s2Options = {}

5.创建表格实例

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

6.渲染表格

s2.render();

注：我是借用antV实现低代码，需要数据和表格样式实时更新，所以我将3到6步放在了一个方法里，然后watch监听数据变化，每次数据变化都去调用方法，从而实现了实时更新

下一篇数据解析（antV + vue3 数据字段解析-优快云博客）