vue3中使用antv-S2表格（基础功能版）

已于 2024-04-17 11:12:04 修改
阅读量1.9k 收藏 5
点赞数 4
CC 4.0 BY-SA版权
分类专栏： ❤️❤️--vue3核心技术栈 文章标签： vue.js javascript 前端
于 2024-04-10 18:04:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/137510219
本文介绍了如何在Vue3项目中使用antv-S2表格，包括搭建项目环境、安装组件、自定义配置如字段图标、表头图标、关闭默认排序标志及显示小计、总计等基础功能。

先看展示效果：

可以调整行宽、列宽、自定义字段图标、表头图标、添加排序、显示总计、小计等

 

首先确保搭建一个vue3项目环境，从0开始的小伙伴着重看第一点：

一、搭建vue3项目环境

首先创建一个vue3+vite+ts项目，可以查看下面相关文章，只看第一条即可

如何创建一个v

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue 3 + antV s2表格可拖拽表格
pyf18809486818的博客
12-23 3682
vue 3 中使用S表格达到可拖拽 Introduction | S2 安装： npm install @antv/s2 <div id="chartDiv" ref="myTable"></div> import { TableSheet } from "@antv/s2"; //或者只引入需要用到的G2组件 import { nextTick} from 'vue' let myTable = ref<any>(null); funct
AntV的多维交叉分析神器：S2
2401_83063795的博客
07-12 1383
探索数据的无限可能，S2让分析更直观、更高效。
S2多维可视分析表格解析
最新发布
轩哥的个人研究和成长记录
09-22 1304
摘要：S2是蚂蚁集团AntV团队开发的企业级多维交叉分析表格组件，基于Canvas渲染引擎构建，支持百万级数据实时可视化分析。采用TypeScript开发，提供React/Vue等多框架适配，具有高性能渲染和灵活扩展特性。项目采用模块化架构设计，核心包含数据处理层、布局渲染层和交互系统，运用策略模式、工厂模式等设计模式实现表格类型扩展。通过数据驱动的渲染机制，支持透视表、明细表等多种表格形态，并提供丰富的自定义扩展能力。
【React】antv S2快速上手
不忘初心，坚定道路！
07-12 4607
之前我司一直用葡萄城的excel，但后来没人维护，搞起来麻烦。最近antv s2开源，界面漂亮功能强大，试用了下觉得很不错。
基于vue3+ts配置化table表格组件实现浅析
junner443的博客
06-20 4804
基于vue3+ts配置化table表格组件实现浅析，同时兼容element-plus和ant-design-vue
Vue3使用AntV s2创建表格并导出表格
2301_76315784的博客
09-22 3036
5、导出为CSV，excel可打开。4、点击导出按钮，触发导出函数。2、在vue3中下载模块。（1）在标签上添加ref。
vue3+AntvS2基本使用与导出excel
四岁爱上了她的博客
09-29 890
安装 antv/s2 和 antv/s2-vue npm i @antv/s2 npm i @antv/s2-vue react项目自行更换 antv/s2-vue 在vue3里使用 新建一个名为 PageThreeLook.vue 的文件。 由于数据有时很大，所以这边是在后端返回数据后就先计算，然后再渲染的。计算是再 getPageList（）方法里进行 <!-- 预算与实际---页面 --> <template> <div class="home">
vue使用antv/s2怎么更新表格数据，实现excel的筛选和排序功能
08-16
在 Vue 项目中使用 `antv/s2` 实现表格数据更新，并支持类似 Excel 的筛选和排序功能，可以通过以下几个方面来实现： ### 数据更新机制 `antv/s2` 提供了数据更新的能力，通过 `setData` 方法可以动态更新表格数据...
antV+vue3 a-table组件中将返回的数据组合显示，并进行换行显示
每一次跌倒都是为了华丽的站起来。
05-31 711
antV+vue3 a-table组件中将返回的数据组合显示，并进行换行显示
Antv/s2 明细表 透视表实现和性能优化（一）
weixin_42274805的博客
10-08 2989
/ 数据源表单// 数据范围// 行维度// 列维度// 指标// 过滤// 图表配置// 背景});不用关心BaseControl有什么，看看几个特有的属性：xDimension： 行维度yDimension： 列维度metrics：指标。
【AntV】canvas表格s2完全封装手册
不忘初心，坚定道路！
08-31 2290
由于我们业务中有很多地方需要有纵向复制，刷选等操作，一般的传统表格并不支持。目前支持度较好的葡萄城表格与handsontable都需要收费，而s2作为一款轻量级开源表单较为符合我们的需求，但是由于s2仍然不够成熟，有非常多的功能需要自定义。我在公司对s2做了大量封装，对里面代码基本上算比较熟悉了。本篇结合我们业务中的需求，带大家看看s2可以做到什么地步，需要进行怎样的改动。本文写了s2常见的封装功能，目前暂时写这么多，以后有新的再补充。
antV + VUE3 基础实现
qq_45654366的博客
06-25 919
antV
探索多维数据分析新境界：AntV S2
gitblog_00037的博客
05-14 747
在数据可视化的世界中，AntV S2 以其强大的多维可视分析表格功能脱颖而出。作为一个开源项目，S2 提供了丰富的分析工具和灵活的定制选项，让你可以便捷地对复杂的数据进行深入洞察。无论是新手还是经验丰富的开发者，都能从中找到适合自己的解决方案。 ![S2 示例](https://gw.alipayobjects.com/zos/antfincdn/6R5Koawk9L/huaban%252520...
vue3+antd 封装弹框组件及父子传值
月影神社
04-09 377
vue3+antd 封装弹框组件
antV + vue3 数据字段解析
qq_45654366的博客
06-25 498
基本上每个表格的fields里都有'rows', 'cloumns', 'values'三个字段，'rows', 'cloumns',存放的是行头和列头的字段，'values'存放的数据单元格的字段。data是一存放数据的字段，里面是数据的value和label(name), 它会自动去匹配我们设置的'fields', 和'meat', 其中'fields'中的'values'控制着展现哪些字段。3.然后就是'meta'字段，'meta'字段里有'field', 'name'两个字段。
Vue3表格（Table）
热门推荐
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-17 1万+
展示行列数据分页表格组件，支持：加载中；暂无数据；带边框；自定义样式；三种尺寸；列对齐方式；斑马条纹；自定义页头和页脚；单元格自动省略；合并单元格；可编辑单元格；可编辑行；可展开；固定列；固定表头；固定头和列；随页面滚动的固定表头和滚动条；表头分组；表格排序；可选择；总之，功能丰富，简单易用😁😁
保姆级教程 | 表格自动行合并实现
艾米栗的代码天地
08-26 1615
在 element-ui 和 antv 中都有表格合并，但如何确定哪几行要合并呢？ 在随机给定数据的情况下，如何实现自动合并呢？本文将一一解答这些问题。
使用 AntV S2 打造大数据表格组件
weixin_41498276的博客
03-09 6685
本文记录的是在开源软件不足以满足需求，同时商业软件价格高、定制难的情况下，蚂蚁数据智能前端团队是如何基于开源 Canvas 表格渲染库 AntV S2 实现拥有诸多功能的 React 大数据表格组件。
AntV S2入门教程
weixin_39415598的博客
06-18 750
/ 注册新主题});// 使用主题示例来源：官方“主题配置” ([s2.antv.antgroup.com][3])。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值