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

news2025/6/26 9:52:07

先看展示效果：

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

 

首先确保搭建一个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 自带的，也可以是自定义的 icon
      icons: ["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 自带的，也可以是自定义的 icon
      defaultHide: 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.coloradmin.cn/o/1584172.html

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

相关文章

windows + pytorch + gpu

windows + pytorch + gpu

nvidia、cuda和cudnn之间的版本匹配关系 1. 命令行查看nvidia的驱动版本 英伟达驱动版本是512.78&#xff0c;cuda版本是11.6&#xff08;说明要下的cuda toolkit版本最高是11.6的&#xff09; 插入&#xff1a;显卡驱动的安装 2. 网站查看cuda和英伟达驱动、cudnn之间的关系…
阅读更多...
JVM面试整理--对象的创建和堆

JVM面试整理--对象的创建和堆

文章目录 对象的创建过程是怎样的?对象在内存中的结构是怎样的&#xff08;专业的叫法&#xff1a;对象的内存布局&#xff09;对象在内存分配时使用的哪种方式&#xff08;有的地方也称为&#xff1a;分配算法&#xff09;知道什么是“指针碰撞”吗&#xff1f;知道什么是“空…
阅读更多...
PlayerSettings.WebGL.emscriptenArgs设置无效的问题

PlayerSettings.WebGL.emscriptenArgs设置无效的问题

1&#xff09;PlayerSettings.WebGL.emscriptenArgs设置无效的问题 2&#xff09;多个小资源包合并为大资源包的疑问 3&#xff09;AssetBundle在移动设备上丢失 4&#xff09;Unity云渲染插件RenderStreaming&#xff0c;如何实现多用户分别有独立的操作 这是第381篇UWA技术知…
阅读更多...
“盲人辅助”科技革新：软件赋能，破解出行难题

“盲人辅助”科技革新：软件赋能，破解出行难题

作为一名资深记者&#xff0c;我长期关注并报道社会弱势群体权益保障议题&#xff0c;其中视障人士的出行困境尤为引人深思。面对城市生活的复杂环境&#xff0c;盲人辅助技术的革新显得至关重要。近期&#xff0c;一款专注于辅助盲人避障的应用蝙蝠避障脱颖而出&#xff0c;以…
阅读更多...
基于高德地图数据采集及可视化城市交通健康榜

基于高德地图数据采集及可视化城市交通健康榜

基于高德地图数据采集及可视化城市交通健康榜 引言 交通状况是衡量一个城市发展水平和居民生活质量的重要指标之一。近年来&#xff0c;随着城市化进程的加快&#xff0c;交通拥堵问题日益凸显&#xff0c;成为城市管理者和居民关注的焦点。高德地图作为中国领先的数字地图内…
阅读更多...
ELK企业日志分析系统介绍

ELK企业日志分析系统介绍

前言 随着企业级应用系统日益复杂&#xff0c;随之产生的海量日志数据。传统的日志管理和分析手段&#xff0c;难以做到高效检索、实时监控以及深度挖掘潜在价值。在此背景下&#xff0c;ELK日志分析系统应运而生。本文将从ELK 日志分析系统的原理、架构及其在实践中的应用做相…
阅读更多...
电力系统卫星授时信号安全隔离装置防护方案

电力系统卫星授时信号安全隔离装置防护方案

电力系统是国家关键基础设施&#xff0c; 电力安全关系国计民生&#xff0c; 是国家安全的重要保障&#xff0c; 与政治安全、经济安全、 网络安全、社会安全等诸多领域密切关联。电网运行情况瞬息万变&#xff0c;为了在其发生事故时能够及时得到处理&#xff0c;需要统一的时…
阅读更多...
自用---

自用---

零、环境配置 keil代码补全 keil pack包 cubemx配置安装包 一、LED cubemx配置PD2引脚为输出模式 uint16_t led_value 0x00; void led_set(uint8_t led_dis) {HAL_GPIO_WritePin(GPIOC,GPIO_PIN_All,GPIO_PIN_SET);HAL_GPIO_WritePin(GPIOC,led_dis<<8,GPIO_PIN_R…
阅读更多...
Node.js cnpm的安装

Node.js cnpm的安装

百度搜索 cnpm,进入npmmirror 镜像站https://npmmirror.com/ cmd窗口输入 npm install -g cnpm --registryhttps://registry.npmmirror.com
阅读更多...
Pytorch官方FlashAttention速度测试

Pytorch官方FlashAttention速度测试

在Pytorch的2.2版本更新文档中&#xff0c;官方重点强调了通过实现FlashAtteneion-v2实现了对scaled_dot_product_attention约2X左右的加速。 今天抽空亲自试了下&#xff0c;看看加速效果是否如官方所说。测试前需要将Pytorch的版本更新到2.2及以上&#xff0c;下面是测试代码…
阅读更多...
【opencv】示例-facial_features.cpp 使用Haarcascade分类器检测面部特征点

【opencv】示例-facial_features.cpp 使用Haarcascade分类器检测面部特征点

// 包含OpenCV库中有关对象检测的头文件 #include "opencv2/objdetect.hpp" // 包含OpenCV库中有关高层GUI函数的头文件 #include "opencv2/highgui.hpp" // 包含OpenCV库中有关图片处理的头文件 #include "opencv2/imgproc.hpp"// 包含输入输出…
阅读更多...
Vue的学习之旅-part6-循环的集中写法与ES6增强语法

Vue的学习之旅-part6-循环的集中写法与ES6增强语法

Vue的学习之旅-循环的集中写法与ES6增强语法 vue中的几种循环写法for循环for in 循环 for(let i in data){}for of 循环 for(let item of data){}reduce() 遍历 reduce( function( preValue, item){} , 0 ) ES6增强写法 类似语法糖简写对象简写函数简写 动态组件中使用 <kee…
阅读更多...
Web漏洞-文件上传之内容逻辑数组

Web漏洞-文件上传之内容逻辑数组

图片一句话制作方法&#xff1a; copy 1.png /b shell.php /a webshell.jpg 具体示例见upload-labs 的14-17 二次渲染----见Pass-18 用/.或者%00绕过&#xff1a;Pass-20----Pass-21 CVE-2017-12615复现 创好环境后打开环境&#xff0c;再访问ip8080 抓包发送数据 Shell的…
阅读更多...
M1 Flutter SDK的安装和环境配置

M1 Flutter SDK的安装和环境配置

前言 作为iOS 开发&#xff0c;观望了许久的Flutter &#xff0c;还是对它下手了&#xff0c;不是故意要卷&#xff0c;没办法工作需要&#xff01;既然要学Flutter&#xff0c;首先就得配置Flutter的相关环境&#xff0c;由于我的是M1 芯片的电脑&#xff0c;记录下来配置过程…
阅读更多...
四川古力未来科技抖音小店：安全守护，购物无忧

四川古力未来科技抖音小店：安全守护，购物无忧

在当下数字化浪潮席卷全球的背景下&#xff0c;电商行业迎来了前所未有的发展机遇。四川古力未来科技抖音小店作为新兴的电商力量&#xff0c;以其独特的魅力和强大的安全保障措施&#xff0c;赢得了广大消费者的青睐和信任。本文将深入探讨四川古力未来科技抖音小店在安全方面…
阅读更多...
java+saas模式医院云HIS系统源码Java+Spring+MySQL + MyCat融合BS版电子病历系统，支持电子病历四级

java+saas模式医院云HIS系统源码Java+Spring+MySQL + MyCat融合BS版电子病历系统，支持电子病历四级

javasaas模式医院云HIS系统源码JavaSpringMySQL MyCat融合BS版电子病历系统&#xff0c;支持电子病历四级 云HIS系统是一款满足基层医院各类业务需要的健康云产品。该产品能帮助基层医院完成日常各类业务&#xff0c;提供病患预约挂号支持、病患问诊、电子病历、开药发药、会员…
阅读更多...
Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之八 简单视频素描效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之八 简单视频素描效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之八 简单视频素描效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之八 简单视频素描效果 一、简单介绍 二、简单指定视频某片段快放效果实现原理 三、简单指定视频某…
阅读更多...
盲人出行新篇章：一款悄然改变生活的盲人导航应用

盲人出行新篇章：一款悄然改变生活的盲人导航应用

作为一名资深记者&#xff0c;我始终关注并报道那些以科技创新改善特殊群体生活质量的故事。近期&#xff0c;一款名为蝙蝠避障的专业盲人导航辅助工具引起了我的关注。它凭借独树一帜的避障技术&#xff0c;悄然间为视障群体的独立出行开启了全新篇章&#xff0c;带来了显著且…
阅读更多...
HarmonyOS实战开发-本示例模拟倒计时场景，如何实现振动。

HarmonyOS实战开发-本示例模拟倒计时场景，如何实现振动。

介绍 本示例模拟倒计时场景&#xff0c;通过ohos.vibrator 等接口来实现振动。 效果预览 使用说明 1.点击倒计时文本&#xff0c;弹出时间选择框&#xff0c;选择任意时间&#xff0c;点击确认&#xff0c;倒计时文本显示选择的时间。 2.点击start&#xff0c;开始倒计时&a…
阅读更多...
【JavaEE初阶系列】——网络初识—TCP/IP五层网络模型

【JavaEE初阶系列】——网络初识—TCP/IP五层网络模型

目录 &#x1f6a9;网络的发展史 &#x1f388;局域网LAN &#x1f388;广域网WAN &#x1f6a9;网络通信基础 &#x1f388;IP地址 &#x1f388;端口号 &#x1f388;协议类型 &#x1f388;五元组 &#x1f6a9;协议分层 &#x1f388;什么是协议分层 &#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023