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 自带的，也可以是自定义的 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、单元格点击事件等功能，下篇文章更新哦~

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

铸造大型基础平板的结构应该怎样设计

铸造大型基础平板的结构应该怎样设计

设计大型基础平板的结构时&#xff0c;需要考虑以下几个方面&#xff1a; 地质条件&#xff1a;首先要了解工程所在地的地质条件&#xff0c;包括土质、地下水位、地震状况等。根据地质条件来选择合适的基础类型&#xff0c;如浅基、深基或地下连续墙等。 荷载分析&#xff1a…
阅读更多...
Lumos学习python第九课：VSCode+Anaconda

Lumos学习python第九课：VSCode+Anaconda

注意Anaconda版本和Python版本的对应关系&#xff0c;同一个Anaconda可以支持多个Python版本&#xff0c; 注&#xff1a;现在vscode已原生支持jupyter notebook&#xff08;要求Python版本>3.6&#xff09; Anaconda在Python解析器的基础上封装了很多Python包&#xff0c…
阅读更多...
Weblogic任意文件上传漏洞（CVE-2018-2894）漏洞复现（基于vulhub）

Weblogic任意文件上传漏洞（CVE-2018-2894）漏洞复现（基于vulhub）

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…
阅读更多...
C++模板编程

C++模板编程

模板是泛型编程的基础&#xff0c;先给出泛型编程的概念。 泛型编程&#xff1a;编写与类型无关的通用代码&#xff0c;是代码复用的一种手段。 应用场景&#xff1a;比如要实现一个通用的&#xff0c;进行两个变量互相交换的函数&#xff0c;此时可以通过函数重载的方式&…
阅读更多...
Ubuntu配置VScode的C++环境

Ubuntu配置VScode的C++环境

在Ubuntu系统下配置C环境&#xff0c;并运行helloworld 1. 下载VScode 我这里使用的是星火应用商店&#xff0c;在商店里面可以直接下载安装 http://spark-app.store/ 2.创建文件夹 3.启动VScode并打开该文件夹 4.安装以下几个扩展 PS&#xff1a;Clang这个插件别安装&…
阅读更多...
3. DAX 时间函数-- DATE 日期--一生二，二生三，三生万物

3. DAX 时间函数-- DATE 日期--一生二，二生三，三生万物

在数据分析过程中&#xff0c;经常需要从一个数据推到另外一个数据&#xff0c;日期数据也是如此&#xff0c;需要从一个日期推到另外一个相关的日期&#xff0c;或者从一群日期推到另外一个相关的日期/一群相关的日期。这一期说的就是日期之间彼此推衍的函数&#xff0c;会比之…
阅读更多...
C# 操作PDF表单 - 创建、填写、删除PDF表单域

C# 操作PDF表单 - 创建、填写、删除PDF表单域

通常情况下&#xff0c;PDF文件是不可编辑的&#xff0c;但PDF表单提供了一些可编辑区域&#xff0c;允许用户填写和提交信息。PDF表单通常用于收集信息、反馈或进行在线申请&#xff0c;是许多行业中数据收集和交换的重要工具。 PDF表单可以包含各种类型的输入控件&#xff0…
阅读更多...
QT：事件机制

QT：事件机制

作业&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTime> #include<QPushButton> #include <QTextToSpeech>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAME…
阅读更多...
头歌-机器学习 第15次实验 朴素贝叶斯分类器

头歌-机器学习 第15次实验 朴素贝叶斯分类器

第1关：条件概率 任务描述 本关任务：根据本节课所学知识完成本关所设置的选择题。 相关知识 为了完成本关任务，你需要掌握条件概率。 条件概率 朴素贝叶斯分类算法是基于贝叶斯定理与特征条件独立假设的分类方法，因此想要了解朴素贝叶斯分类算法背后的算法原理，就不得…
阅读更多...
【CSS】一篇文章讲清楚screen、window和html元素的位置：top、left、width、height

【CSS】一篇文章讲清楚screen、window和html元素的位置：top、left、width、height

一个Web网页从内到外的顺序是&#xff1a; 元素div,ul,table... → 页面body → 浏览器window → 屏幕screen 分类详情屏幕screen srceen.width - 屏幕的宽度 screen.height - 屏幕的高度&#xff08;屏幕未缩放时&#xff0c;表示屏幕分辨率&#xff09; screen.availLeft …
阅读更多...
(一)基于IDEA的JAVA基础13

(一)基于IDEA的JAVA基础13

数组遍历 遍历数组就是把数组内的数据一个个的取出来 1.我们可以用for循环&#xff0c;依次把数字类的元素取出来。 2.增强型for循环。 用第一个方法写一下&#xff0c;看一下 public class Test01 { public static void main(String[] args) { //存储一组数据{…
阅读更多...
TQ15EG开发板教程：在MPSOC上运行ADRV9009

TQ15EG开发板教程：在MPSOC上运行ADRV9009

首先需要在github上下载两个文件&#xff0c;本例程用到的文件以及最终文件我都会放在网盘里面&#xff0c; 地址放在最后面。在github搜索hdl选择第一个&#xff0c;如下图所示 GitHub网址&#xff1a;https://github.com/analogdevicesinc/hdl/releases 点击releases选择版…
阅读更多...
【C++题解】1005 - 已知一个圆的半径，求解该圆的面积和周长

【C++题解】1005 - 已知一个圆的半径，求解该圆的面积和周长

问题&#xff1a;1005 - 已知一个圆的半径&#xff0c;求解该圆的面积和周长 类型&#xff1a;基础问题、小数运算 题目描述&#xff1a; 已知一个圆的半径&#xff0c;求解该圆的面积和周长。 输入&#xff1a; 输入只有一行&#xff0c;只有 1 个整数。 输出&#xff1a…
阅读更多...
迭代器模式【行为模式C++】

迭代器模式【行为模式C++】

1.简介 迭代器模式是一种行为设计模式&#xff0c; 让你能在不暴露集合&#xff08;聚合对象&#xff09;底层表现形式 &#xff08;列表、 栈和树等&#xff09; 的情况下遍历集合&#xff08;聚合对象&#xff09;中所有的元素。 迭代器的意义就是将这个行为抽离封装起来&a…
阅读更多...
【大厂生产案例】JVM调优

【大厂生产案例】JVM调优

写作目的 最近上线了一个需求&#xff0c;遇到了一个JVM报警的问题&#xff0c;很荣幸能遇到&#xff0c;在此分享一下整个调优的过程。 背景 我们是中台服务&#xff0c;我们的甲方就是上游不同的业务。中台原则上是业务和能力分离&#xff0c;但是不可避免的是分不开&…
阅读更多...
数据结构学习之路--全面破解顺序表的奥秘(附C源码)

数据结构学习之路--全面破解顺序表的奥秘(附C源码)

好久不见啊~大家&#xff0c;今天为大家带来的主题是&#xff1a;顺序表的实现。 目录 前言 一、线性表的定义 二、线性表的顺序结构 1 顺序表的定义 2 顺序表的基本操作 2.1 初始化函数 2.2 顺序表的销毁 2.3 顺序表的扩容 2.4 顺序表的尾插 2.5 顺序表的尾删 …
阅读更多...
【学习】软件测试需求分析要从哪些方面入手

【学习】软件测试需求分析要从哪些方面入手

软件测试需求分析是软件测试过程中非常重要的一个环节&#xff0c;它是为了明确软件测试的目标、范围、资源和时间等要素&#xff0c;以确保软件测试的有效性和全面性。本文将从以下几个方面对软件测试需求分析进行详细的阐述&#xff1a; 一、软件测试目标 软件测试目标是指…
阅读更多...
LeetCode_145(二叉树的后序遍历)

LeetCode_145(二叉树的后序遍历)

1.递归 public List<Integer> postorderTraversal(TreeNode root) {List<Integer> res new ArrayList<>();accessTree(root,res);return res;}public void accessTree(TreeNode root, List<Integer> res){if(root null){return;}accessTree(root.le…
阅读更多...
219 基于matlab的汽车悬架（钢板弹簧，减震器）设计程序ＧＵＩ

219 基于matlab的汽车悬架（钢板弹簧，减震器）设计程序ＧＵＩ

基于matlab的汽车悬架&#xff08;钢板弹簧&#xff0c;减震器&#xff09;设计程序&#xff27;&#xff35;&#xff29;。根据需求输入设计参数&#xff0c;包括前桥负荷、簧下质量、弹簧刚度、阻尼等&#xff0c;输出钢板弹簧、减震器结果。程序已调通&#xff0c;可直接运…
阅读更多...
FHE全同态加密简介

FHE全同态加密简介

1. 何为FHE&#xff1f; FHE (Fully homomorphic encryption)&#xff1a; 是一种隐私技术&#xff0c;支持直接对密文进行计算&#xff0c;而无需对密文先解密再计算。即&#xff0c;任何第三方或云厂商&#xff0c;都可对敏感信息的密文进行处理&#xff0c;而无需访问密文内…
阅读更多...
最新文章

Copyright @ 2022~2023