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.mzph.cn/news/814579.shtml

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

相关文章

Mojo语言初次入手

Mojo语言初次入手

Mojo的出现被认为是编程语言领域的一大进步&#xff0c;有观点认为它可能是几十年来最大的编程进步???!!! 让我来试试&#xff0c;看看是怎么回事。 安装Mojo 打开命令行界面。执行以下命令来安装Mojo SDK&#xff1a; curl -s https://get.modular.com | sh - 3.接下来&…
阅读更多...
大厂Java笔试题之百钱买百鸡问题

大厂Java笔试题之百钱买百鸡问题

题目&#xff1a;公元五世纪&#xff0c;我国古代数学家张丘建在《算经》一书中提出了"百鸡问题"&#xff1a;鸡翁一值钱五&#xff0c;鸡母一值钱三&#xff0c;鸡雏三值钱一。 百钱买百鸡&#xff0c;问鸡翁、鸡母、鸡雏各几何&#xff1f; 现要求你打印出所有花一…
阅读更多...
uniapp——长按识别二维码

uniapp——长按识别二维码

说明 转变思路&#xff0c;长按图片&#xff0c;进入预览图片&#xff0c;这时候再长按就可以了。 <view class"codeMain"><view class"codeWhite" longpress"handleLongPress(i.image(qrcode))"><image :src"i.image(qrc…
阅读更多...
解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题--数据可视化大屏

解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题--数据可视化大屏

近期在工作中遇到一个问题&#xff0c;记录一下&#xff0c;在项目上线之后&#xff0c;遇到一个问题&#xff0c;即缩放到90%时&#xff0c;页面字体比默认的100%字体大&#xff0c;一开始毫无头绪&#xff0c;经过一番的Google...Google...Google....&#xff0c;终于找到了解…
阅读更多...
游戏服务器DDOS克星-抗D盾（游戏盾）

游戏服务器DDOS克星-抗D盾（游戏盾）

随着网络游戏市场的不断扩大和发展&#xff0c;游戏服务器遭受DDOS攻击的频率也在逐年增加。DDOS攻击的主要目的是使游戏服务器瘫痪&#xff0c;使得游戏无法正常进行&#xff0c;导致游戏运营商巨额损失。鉴于此&#xff0c;针对游戏服务器的防DDOS攻击技术德迅云安全自主研发…
阅读更多...
冲刺2024年思维100春季线上比赛：做做历年思维100真题（附答案）

冲刺2024年思维100春季线上比赛：做做历年思维100真题（附答案）

今天是2024年4月14日&#xff0c;距离2024年春季思维100活动第一阶段的线上比赛4月20日还有6天。那么2024年思维100活动的考试重点是什么呢&#xff1f;主办方未公布&#xff0c;我们可以从历年的思维100真题中来分析和推测&#xff0c;把历年真题和背后的知识点吃透了&#xf…
阅读更多...
6.0 MapReduce 使用

6.0 MapReduce 使用

6.0 MapReduce 使用 分类 编程 在学习了之前的 MapReduce 概念之后&#xff0c;我们应该已经知道什么是 Map 和 Reduce&#xff0c;并了解了他们的工作方式。 本章将学习如何使用 MapReduce。 Word Count Word Count 就是"词语统计"&#xff0c;这是 MapReduce 工…
阅读更多...
深度剖析Java中的String类

深度剖析Java中的String类

目录 引言 String类的特性 String类的部分实现代码&#xff1a; 不可变性&#xff1a; 补充&#xff1a; 常量池&#xff1a; 不可变性的好处 创建String对象 创建String对象的常用的三种方法如下&#xff1a; 使用常量串构造&#xff08;最常用&#xff09;&#xf…
阅读更多...
抖音滑块验证码加密的盐的位置

抖音滑块验证码加密的盐的位置

最近更新后之前很容易找到盐的位置的方法变了&#xff0c;抖音特意把盐隐藏起来了 {"reply": "RJC","models": "yAd8rl","in_modal": "DTn0nD2","in_slide": "ou7H0Ngda","move": …
阅读更多...
Hystrix应用：如何在Spring Boot中使用Hystrix？

Hystrix应用：如何在Spring Boot中使用Hystrix？

Hystrix应用&#xff1a;如何在Spring Boot中使用Hystrix&#xff1f; 引言 在微服务架构的发展过程中&#xff0c;面对复杂的服务依赖和不可预见的系统故障&#xff0c;如何提升系统的容错能力成为了一个非常急迫且重要的能力。 由 Netflix&#xff08;网飞&#xff09;公司…
阅读更多...
基于java+springboot+vue实现的网上购物系统（文末源码+Lw+ppt）23-42

基于java+springboot+vue实现的网上购物系统（文末源码+Lw+ppt）23-42

摘 要 随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决生活上的问题&#xff0c;网上购物系统展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为…
阅读更多...
Ubuntu-22.04安装VMware虚拟机并安装Windows10

Ubuntu-22.04安装VMware虚拟机并安装Windows10

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、VMware是什么&#xff1f;二、安装VMware1.注册VMware账号2.下载虚拟机3.编译vmmon&vmnet4.加载module5.安装bundle 三、安装Windows101.基础配置2.进阶…
阅读更多...
【leetcode面试经典150题】50. 插入区间（C++）

【leetcode面试经典150题】50. 插入区间（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…
阅读更多...
【算法】分治-快排

【算法】分治-快排

个人主页 &#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 分析…
阅读更多...
滚雪球学Java(73)：Java中的引用类型： 弱引用、软引用与强引用详解

滚雪球学Java(73)：Java中的引用类型： 弱引用、软引用与强引用详解

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…
阅读更多...
Scrum.org认证PSM（Professional Scrum Master）官方认证班

Scrum.org认证PSM（Professional Scrum Master）官方认证班

课程简介 Scrum是目前运用最为广泛的敏捷开发方法&#xff0c;是一个轻量级的项目管理和产品研发管理框架&#xff0c;旨在最短时间内交付最大价值。根据2022年全球敏捷状态报告&#xff0c;Scrum的应用占比已经达到87%。 Scrum.org 由 Scrum 的联合创始人 Ken Schwaber 创立…
阅读更多...
git log详解

git log详解

文章目录 git log -p其他常用的参数 git log是用来查看历史提交记录的&#xff0c;那么这些记录包含什么呢&#xff1f;如果你不指定分支或者master&#xff0c;默认情况下git log显示的是目前你HEAD的位置的git提交日志&#xff0c;默认不加参数&#xff0c;git log显示如下&a…
阅读更多...
【C++风云录】融入虚拟现实的魅力：借助 C++ 库打造沉浸式的游戏体验和交互效果

【C++风云录】融入虚拟现实的魅力：借助 C++ 库打造沉浸式的游戏体验和交互效果

点燃创造力&#xff1a;解锁 C 库的潜力&#xff0c;构建令人惊叹的物理模拟和游戏应用 前言 在现代的游戏和虚拟现实应用中&#xff0c;物理模拟和真实的交互体验是不可或缺的要素。为了实现逼真的物理效果和流畅的游戏体验&#xff0c;开发人员需要依赖强大的物理模拟库和游…
阅读更多...
如何在ADS中实现数据的导入和导出

如何在ADS中实现数据的导入和导出

1 MDIF接口 ADS提供了一种通用的MDIF格式文件&#xff0c;允许用户使用一个通用的数据接口实现导入和导出的功能&#xff0c;其Help文件中的简介如下&#xff1a; 2 数据的导入 实现数据导入功能之前&#xff0c;数据必须遵从一定的标准格式&#xff0c;如下图所示&#xff0c;…
阅读更多...
有哪些更复杂的并发编程概念可以进一步学习？

有哪些更复杂的并发编程概念可以进一步学习？

并发集合&#xff1a;Java 提供了一套并发集合类&#xff0c;如 ConcurrentHashMap&#xff0c;ConcurrentLinkedQueue 和 CopyOnWriteArrayList 等&#xff0c;可以在并发环境下使用&#xff0c;而不需担心线程安全问题。 原子变量: java.util.concurrent.atomic 包提供了一组…
阅读更多...
最新文章

Copyright @ 2022~2023