vue3中使用antv-S2表格(基础功能版)

先看展示效果:

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

 

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

一、搭建vue3项目环境

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

如何创建一个vite+vue3+ts项目(小白必看)_vite+ts+vue3项目创建-CSDN博客

创建好vue3项目之后就可以进行第二步 

二、 安装antv-S2

可以查看官网:S2

1、在项目中安装(npm/pnpm都可以)

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

2、也可以再安装一下用于高级排序、下钻的组件库

pnpm add ant-design-vue@3.x

3、安装好以后就可以直接通过官网的例子进行测验

 tests2.vue

<template><SheetComponent :dataCfg="dataCfg" :options="options" />
</template><script setup lang="ts">
import type { S2Options } from "@antv/s2";
import { SheetComponent } from "@antv/s2-vue";
import { reactive, shallowRef } from "vue";
import "@antv/s2-vue/dist/style.min.css";// dataCfg 数据字段较多,建议使用 shallow, 如果有数据更改直接替换整个对象
const s2Options = {};
const s2DataConfig = {fields: {rows: ["province", "city"],columns: ["type"],values: ["price"],},data: [{province: "浙江",city: "杭州",type: "笔",price: "1",},{province: "浙江",city: "杭州",type: "纸张",price: "2",},{province: "浙江",city: "舟山",type: "笔",price: "17",},{province: "浙江",city: "舟山",type: "纸张",price: "6",},{province: "吉林",city: "长春",type: "笔",price: "8",},{province: "吉林",city: "白山",type: "笔",price: "12",},{province: "吉林",city: "长春",type: "纸张",price: "3",},{province: "吉林",city: "白山",type: "纸张",price: "25",},{province: "浙江",city: "杭州",type: "笔",cost: "0.5",},{province: "浙江",city: "杭州",type: "纸张",cost: "20",},{province: "浙江",city: "舟山",type: "笔",cost: "1.7",},{province: "浙江",city: "舟山",type: "纸张",cost: "0.12",},{province: "吉林",city: "长春",type: "笔",cost: "10",},{province: "吉林",city: "白山",type: "笔",cost: "9",},{province: "吉林",city: "长春",type: "纸张",cost: "3",},{province: "吉林",city: "白山",type: "纸张",cost: "1",},],
};
const dataCfg = shallowRef(s2DataConfig);
const options: S2Options = reactive(s2Options);
</script>

就可以看到效果:

可以调整行宽、列宽、列排序、单个单元格详情展示、选中某列、某行等基本功能

三、一些常用配置

1、自定义字段图标

参考文档:字段标记,自定义字段图标

在s2Options中配置,代码如下:

// 添加自定义图标customSVGIcons: [{name: "Sort",svg: `<?xml version="1.0" encoding="UTF-8"?><svg width="15" height="15" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 42L15 29H33L24 42Z" fill="#333" stroke="#333" stroke-width="4" stroke-linejoin="miter"/><path d="M24 6L15 19H33L24 6Z" fill="#333" stroke="#333" stroke-width="4" stroke-linejoin="miter"/></svg>`,},],conditions: {icon: [{field: "price",mapping(fieldValue: any, data: any) {console.log(fieldValue, data, "------------");return {// 使用自定义 icon 名称icon: "Sort",fill: "#30BF78",};},},],},

 效果是:

2、自定义表头图标

同样是在s2Options配置项中设置

customSVGIcons: [{name: "Sort",svg: `<?xml version="1.0" encoding="UTF-8"?><svg width="15" height="15" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 42L15 29H33L24 42Z" fill="#333" stroke="#333" stroke-width="4" stroke-linejoin="miter"/><path d="M24 6L15 19H33L24 6Z" fill="#333" stroke="#333" stroke-width="4" stroke-linejoin="miter"/></svg>`,},{name: "DrillDownIcon",svg: `<?xml version="1.0" encoding="UTF-8"?><svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H6V20H20V6Z" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/><path d="M20 28H6V42H20V28Z" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/><path d="M42 6H28V20H42V6Z" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/><path d="M28 28L42 42M28 28H42H28ZM28 28V42V28Z" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/></svg>`,},],
headerActionIcons: [{// 选择 icon, 可以是 S2 自带的,也可以是自定义的 iconicons: ["DrillDownIcon"],// 通过 belongsCell + displayCondition 设置 icon 的展示位置belongsCell: "colCell",// 可以在displayCondition中通过meta拿到表头信息,设置满足一定条件的表头再显示图标displayCondition: (meta: any) => {return meta.value === "纸张"; },},],

效果是:

我们只让纸张的表头显示图标

 

3、关闭默认排序 icon

表格的数值默认会渲染排序 icon, 可以配置 showDefaultHeaderActionIcon关闭。

效果:

可以看到price的默认排序图标被去掉了 

 

4、显示小计、总计

可以查看官方文档:S2-显示小计、总计

Totals 属性

功能描述: 行/列小计总计配置

参数说明类型默认值必选
row列总计Total-
col行总计Total-
参数说明类型默认值必选
showGrandTotals是否显示总计booleanfalse
showSubTotals是否显示小计。当配置为对象时,always 控制是否在子维度不足 2 个时始终展示小计,默认不展示。boolean | { always: boolean }false
subTotalsDimensions小计的汇总维度string[][]
reverseGrandTotalsLayout总计布局位置,默认下或右booleanfalse
reverseSubTotalsLayout小计布局位置,默认下或右booleanfalse
label总计别名string
subLabel小计别名string
calcGrandTotals自定义-计算总计CalcTotals
calcSubTotals自定义-计算小计CalcTotals

  totals: {//小计总计算配置row: {showGrandTotals: true, // 是否显示总计showSubTotals: true, // 是否显示小计。reverseGrandTotalsLayout: true, // 总计布局位置,默认下或右reverseSubTotalsLayout: true, // 小计布局位置,默认下或右subTotalsDimensions: ["province"], // 小计的汇总维度calcGrandTotals: {aggregation: "SUM",},calcSubTotals: {aggregation: "SUM",},},col: {showGrandTotals: true,showSubTotals: true,reverseGrandTotalsLayout: true,reverseSubTotalsLayout: true,subTotalsDimensions: ["type"],calcGrandTotals: {aggregation: "SUM",},calcSubTotals: {aggregation: "SUM",},},},

效果:

可以通过上面设置的SUM函数自动计算出数值,也可以自定义累加函数

 

自定义函数也可以达到效果:

 

优先级

  1. 数据传入优先级高于计算数据

  2. 配置自定义方法优先级大于配置聚合方式,即配置 calcFunc > aggregation

  3. 当同一个单元格为 行+列 汇总值时,优先级为:列总计/列小计 > 行总计/行小计

四、完整代码

<template><SheetComponent :dataCfg="dataCfg" :options="options" />
</template><script setup lang="ts">
// import type { S2Options } from "@antv/s2";
import { SheetComponent } from "@antv/s2-vue";
import { reactive, shallowRef } from "vue";
import "@antv/s2-vue/dist/style.min.css";const s2Options = {showDefaultHeaderActionIcon: false,width: 650,height: 480,seriesNumber: {enable: true,},totals: {//小计总计算配置row: {showGrandTotals: true, // 是否显示总计showSubTotals: true, // 是否显示小计。reverseGrandTotalsLayout: true, // 总计布局位置,默认下或右reverseSubTotalsLayout: true, // 小计布局位置,默认下或右subTotalsDimensions: ["province"], // 小计的汇总维度calcGrandTotals: {aggregation: "SUM",},calcSubTotals: {calcFunc: () => 10,},},col: {showGrandTotals: true,showSubTotals: true,reverseGrandTotalsLayout: true,reverseSubTotalsLayout: true,subTotalsDimensions: ["type"],calcGrandTotals: {aggregation: "SUM",},calcSubTotals: {aggregation: "SUM",},},},customSVGIcons: [{name: "Sort",svg: `<?xml version="1.0" encoding="UTF-8"?><svg width="15" height="15" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 42L15 29H33L24 42Z" fill="#333" stroke="#333" stroke-width="4" stroke-linejoin="miter"/><path d="M24 6L15 19H33L24 6Z" fill="#333" stroke="#333" stroke-width="4" stroke-linejoin="miter"/></svg>`,},{name: "DrillDownIcon",svg: `<?xml version="1.0" encoding="UTF-8"?><svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H6V20H20V6Z" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/><path d="M20 28H6V42H20V28Z" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/><path d="M42 6H28V20H42V6Z" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/><path d="M28 28L42 42M28 28H42H28ZM28 28V42V28Z" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/></svg>`,},],// 添加自定义字段图标// conditions: {//   icon: [//     {//       field: "price",//       mapping(fieldValue: any, data: any) {//         console.log(fieldValue, data);//         return {//           // 使用自定义 icon 名称//           icon: "Sort",//           fill: "#30BF78",//         };//       },//     },//     {//       field: "type",//       mapping(fieldValue: any) {//         console.log(fieldValue, "------------");//         if (fieldValue !== "type") {//           return {//             icon: "Sort",//             fill: "#025DF4",//           };//         }//       },//     },//   ],// },headerActionIcons: [{// 选择 icon, 可以是 S2 自带的,也可以是自定义的 icondefaultHide: true,icons: ["DrillDownIcon"],// 通过 belongsCell + displayCondition 设置 icon 的展示位置belongsCell: "colCell",displayCondition: (meta: any) => {return meta.value === "price";},},],
};
const s2DataConfig = {showDefaultHeaderActionIcon: false,fields: {rows: ["province", "city"],columns: ["type"],values: ["price"],},data: [{province: "浙江",city: "杭州",type: "笔",price: "1",},{province: "浙江",city: "杭州",type: "纸张",price: "2",},{province: "浙江",city: "舟山",type: "笔",price: "17",},{province: "浙江",city: "舟山",type: "纸张",price: "6",},{province: "吉林",city: "长春",type: "笔",price: "8",},{province: "吉林",city: "白山",type: "笔",price: "12",},{province: "吉林",city: "长春",type: "纸张",price: "3",},{province: "吉林",city: "白山",type: "纸张",price: "25",},{province: "浙江",city: "杭州",type: "笔",cost: "0.5",},{province: "浙江",city: "杭州",type: "纸张",cost: "20",},{province: "浙江",city: "舟山",type: "笔",cost: "1.7",},{province: "浙江",city: "舟山",type: "纸张",cost: "0.12",},{province: "吉林",city: "长春",type: "笔",cost: "10",},{province: "吉林",city: "白山",type: "笔",cost: "9",},{province: "吉林",city: "长春",type: "纸张",cost: "3",},{province: "吉林",city: "白山",type: "纸张",cost: "1",},],
};
const dataCfg = shallowRef(s2DataConfig);
const options: any = reactive(s2Options);
</script>

还有一些自定义tooltip、单元格点击事件等功能,下篇文章更新哦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/308377.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

头歌-机器学习实验 第8次实验 决策树

第1关&#xff1a;什么是决策树 任务描述 本关任务&#xff1a;根据本节课所学知识完成本关所设置的选择题。 相关知识 为了完成本关任务&#xff0c;你需要掌握决策树的相关基础知识。 引例 在炎热的夏天&#xff0c;没有什么比冰镇后的西瓜更能令人感到心旷神怡的了。现…

Spark-Scala语言实战(16)

在之前的文章中&#xff0c;我们学习了三道任务&#xff0c;运用之前学到的方法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言实战&#x…

使用doop识别近commons text漏洞的污点信息流

一、doop静态分析框架简介 1. doop静态分析框架简介 doop静态分析框架由希腊雅典大学plast-lab Yannis Smaragdakis团队设计开发&#xff0c;目前看是一款开源领域的比较先进的程序静态分析框架&#xff0c;一些程序静态分析论文的理论也有通过doop的规则实现后实验。 doop整…

c 解数独(通用方法,适用于9×9 数独)

折腾了一周时间&#xff0c;终于搞定99数独通用方法 思路&#xff1a;1.生成每行空位的值&#xff0c;也就是1-9中除去非0的数。 2.用行&#xff0c;列&#xff0c;宫判断每行中每个空位的最小取值范围后再重新生成每行。 3.随机提取生成的9行&#xff0c;判断每列之和是否等…

【数据结构与算法】:二叉树经典OJ

目录 1. 二叉树的前序遍历 (中&#xff0c;后序类似)2. 二叉树的最大深度3. 平衡二叉树4. 二叉树遍历 1. 二叉树的前序遍历 (中&#xff0c;后序类似) 这道题的意思是对二叉树进行前序遍历&#xff0c;把每个结点的值都存入一个数组中&#xff0c;并且返回这个数组。 思路&…

解决 IDEA每次打开新的项目都要重新设置maven问题

目录 一、当前项目设置maven 如下图&#xff1a; 二、设置打开的新项目的maven 如下图&#xff1a;​ 一、当前项目设置maven 对于当前项目我们都知道设置maven的配置要在 File -- Settings -- Build -- Maven 中设置 如下图&#xff1a; 二、设置打开的新项目的maven F…

150个 HTML5 网站模版 量大慢选

HTML5 网站模版 No.1 HTML5 网站模版 No.1

linux下安装nacos2.2.0

1、获取下载地址并下载 1.1、打开nacos官网 1.2、找到对应版本&#xff0c;点进去 ## 1.3、复制地址 1.4下载 # 进入要安装的目录&#xff0c;cd /usr/local/src # 执行wget https://github.com/alibaba/nacos/releases/download/2.2.0/nacos-server-2.2.0.tar.gz2、 安装…

RTSP/Onvif安防视频EasyNVR平台 vs.多协议接入视频汇聚EasyCVR平台:设备分组的区别

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力&#xff0c;能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、W…

架构设计参考项目系列主题:新零售SaaS架构:客户管理系统架构设计

什么是客户管理系统? 客户管理系统,也称为CRM(Customer Relationship Management),主要目标是建立、发展和维护好客户关系。 CRM系统围绕客户全生命周期的管理,吸引和留存客户,实现缩短销售周期、降低销售成本、增加销售收入的目的,从而提高企业的盈利能力和竞争力。 …

【ARM 裸机】汇编 led 驱动之原理分析

1、我们为什么要学习汇编&#xff1f;&#xff1f;&#xff1f; 之前我们或许接触过 STM32 以及其他的 32 位的 MCU ,都是基于 C 语言环境进行编程的&#xff0c;都没怎么注意汇编&#xff0c;是因为 ST 公司早已将启动文件写好了&#xff0c;新建一个 STM32 工程的时候&#…

nexus搭建maven与docker镜像的私有仓库

引言 通过nexus搭建maven与docker镜像的私有仓库,实现jar包与镜像动态更新、共享、存储。 一、nexus部署 通过docker-compose部署nexus name: java services:#############################环境#############################env-nexus:restart: always## 3.58.1image: so…

Python十大最佳实践:高效Python编程的十个关键方法

在当今的软件开发世界中&#xff0c;Python是一种极其重要且广泛使用的编程语言。以下是Python编程的十大最佳实践&#xff0c;这些实践将帮助你提升编程效率&#xff0c;优化代码质量&#xff0c;以及更好地应用Python的强大功能。 1.理解Pythonic的方式 “Pythonic”是指遵循…

普乐蛙VR航天体验馆设备VR太空飞船VR元宇宙展厅

三天小长假就要来啦&#xff01;五一假期也即将到来。老板们想捉住人流量这个财富密码吗&#xff1f;那快快行动起来&#xff01;开启VR体验项目&#xff0c;假期赚翻天&#xff01;小编亲测&#xff01;&#xff01;这款设备刺激好玩&#xff0c;想必会吸引各位家长小孩、学生…

matlab使用教程(43)—二维曲线图绘制的基本方法

这个博客创建一个简单的曲线图并修改横纵坐标。通过更改线条颜色、线型和添加标记来自定义线图的外观。 1.创建曲线图 使用 plot 函数创建二维曲线图。例如&#xff0c;绘制从 0 到 2 π 之间的正弦函数值&#xff0c;并修改横纵坐标&#xff0c;添加图形标题。 x linspace…

ES6 关于Class类的继承 extends(2024-04-10)

1、简介 类Class 可以通过extends关键字实现继承&#xff0c;让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承&#xff0c;要清晰和方便很多。 class Foo {constructor(x, y) {this.x x;this.y y;console.log(父类构造函数)}toString() {return ( this.x …

【算法】分治-快排

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 前言1. 75. 颜色分类1.1 分析1.2 代码 2. 912. 排序数组2.1 分析2.2 代码 3. 215. 数组中的第K个最大元素3.1 分析3.2 代码 4. LCR 159. 库存管理 III4.1 分析4.2 代码 前言 分治就是分而治之 1. 75. 颜色分类 1.1 分析…

GitHub repository - Pulse - Contributors - Network

GitHub repository - Pulse - Contributors - Network 1. Pulse2. Contributors3. NetworkReferences 1. Pulse 显示该仓库最近的活动信息。该仓库中的软件是无人问津&#xff0c;还是在火热地开发之中&#xff0c;从这里可以一目了然。 2. Contributors 显示对该仓库进行过…

设备树的概念、设备树如何变成device、与driver的匹配

在平台总线驱动模型中资源和驱动已经从逻辑上和代码组织上进行了分离&#xff0c;但每次调整资源还是会涉及到内核&#xff0c;所以现在更加流行的是设备树方式。设备树的好处是通过独立于内核存在&#xff0c;这样如果设备上外设功能启用与否以及位置变动的话很多时候不用修改…

深入理解计算机网络分层结构

一、 为什么要分层&#xff1f; 计算机网络分层的主要目的是将复杂的网络通信过程分解为多个相互独立的层次&#xff0c;每个层次负责特定的功能。这样做有以下几个好处&#xff1a; 模块化设计&#xff1a;每个层次都有清晰定义的功能和接口&#xff0c;使得网络系统更易于设…