借助VTable Skill实现10W+数据渲染

前言

借助VTable Skill实现vtable的基础功能

SKILL作用

输入关键词后结合skill快速的生成我们需要的内容，把"经验手册"变成 AI 可以读取和执行的能力结构。通过Skill，开发者无需记忆繁琐的API文档，只需用自然语言描述需求，AI就能基于VTable的最佳实践生成高质量代码。

安装vtable skill

npx skills add VisActor/VChart 或者

less 复制代码

npx skills add [GitHub - VisActor/VChart: VChart, more than just a cross-platform charting library](https://github.com/visactor/vchart) --skill vchart-development-assistant

进行安装在 Cursor、Trae等支持 skills 的 AI 编辑器中使用。

将技能安装到项目的 .``XXX``/skills 目录下，如下图

快速上手vtable

安装vtable包和准备项目结构

使用 npm 安装

bash 复制代码

npm install @visactor/vtable

使用 yarn 安装

sql 复制代码

yarn add @visactor/vtable

生成基础表格

开始之前，我们先来看一下SKILL里面的文档

我用的是Trae，我们提前配置好智能体和模式

根据skill的用户意图关键词和查询规则，我们输入以下内容：

结合skill技能，创建一个基本表格

可以看到，AI会根据技能，查找对应的md文件，生成如下内容：

数据、列、主题处理

接下来，我们通过更复杂的指令来完善表格功能： 结合skill，我的数据有10万条，列有10列，姓名列固定，主题使用默认主题 AI会根据Skill中的性能优化指南，生成适合大数据量展示的表格配置，包括虚拟滚动、列固定等特性：

固定列的时候发现AI处理成了固定2列，姓名在第二列需要固定前两列，这里要手动处理一下：

为了满足更复杂的展示需求，我们需要对某些列进行复杂的业务处理： 薪资列需要自定义渲染，薪资超过8000的字体变红，超过1万的背景色变红字体白色 AI会利用VTable的自定义渲染能力，生成满足条件的单元格样式配置：

到此，一个具备大10W+数据渲染的表格就完成了。

总结

AI也不是万能的，有时候生成的代码跟你想要的有一丢丢出入，比如我那个固定列的问题，稍微手动调一下就好。但总体来说，以前写个表格要半小时，现在五分钟搞定，剩下的时间摸鱼不香吗？

参考资料：

vtable官网： visactor.com/vtable/exam...

VTable Skill GitHub: github.com/VisActor/VC...

Trae参考文档： docs.trae.ai/ide/skills?...

Cursor参考文档：cursor.com/cn/docs/con...