view deign 和 vue2 合并单元格的方法

1.vue版本和view design 版本

{
   "vue": "^2.6.11",
   "view-design": "^4.7.0",
}

2.Data中定义数据

spanArr: [], // 某一列下需要合并的行数
pos: 0// 索引

// 注意点: 在获取列表前,需要重置 this.spanArr = []
注意点2: 获取列表的请求失败,页需要重置数据(就是列表数据是接口返回的对象中的一个字段,这个列表的标题和数据都是后端返回的,同时返回了其他字段,在请求前你需要重置所有数据,同时重置)

3.方法

getSpanArr(data) {
 data.forEach((item, index) => {
  // 如果是第一个数据,就将列表spanArr添加一个1,表示暂时只有一个名字相同的、且将索引pos赋值为0
    if (index === 0) {
      this.spanArr.push(1)
      this.pos = 0
    } else {
      // 判断当前元素与上一个元素是否相同(这里我们拿要合并的日期date为例)
      if (item.time === data[index - 1].time) {
        // 如果相同就将索引为 pos 的值加一
        this.spanArr[this.pos] += 1
        // 且将数组添加 0
        this.spanArr.push(0)
      } else {
        // 如果元素不同了,就可以通过索引为 pos 的值知道应该需要合并的行数
        // 同时,我们再次添加一个值1,表示重新开始判断某个字段的重复次数
        this.spanArr.push(1)
        // 同时 索引加一
        this.pos = index
      }
    }
  })
},
// 合并单元格的
handleSpan ({ rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    const rowspan = this.spanArr[rowIndex]
    return {
      // 将需要合并的行数赋值给rowspan
      rowspan: rowspan,
      // colspan有两种情况要不是0不显示,要不是1显示,根据rowspan( _row)来确定;
      colspan: rowspan > 0 ? 1 : 0
    }
  }
},

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

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

相关文章

保姆级教程 | VMD输出局部结构及利用TkConsole实现旋转

背景 由于课题需要,现需要展示lammps模拟轨迹中的局部结构(主要是想可视化这里的结果:保姆级教程 | 输出分子动力学轨迹文件输出特定原子范围内的化学环境),因为ovito效果有点笨笨的,所以我这里选用VMD软件为例进行操作,效果图(超级好看夸夸): (说明:主要的分子构…

2024最新分别用sklearn和NumPy设计k-近邻法对鸢尾花数据集进行分类(包含详细注解与可视化结果)

本文章代码实现以下功能: 利用sklearn设计实现k-近邻法。 利用NumPy设计实现k-近邻法。 将设计的k-近邻法对鸢尾花数据集进行分类,通过准确率来验证所设计算法的正确性,并将分类结果可视化。 评估k取不同值时算法的精度,并通过…

HarmonyOS第一课 04 应用程序框架基础-习题分析

判断题 1.在基于Stage模型开发的应用项目中都存在一个app.json5配置文件、以及一个或多个module.json5配置文件。T 正确(True) 错误(False) 这个答案是T - AppScope > app.json5:app.json5配置文件,用于声明应用的全局配置信息,比如应用…

【红外传感器】STM32C8T6标准库使用红外对管

好好学习,天天向上 前言一、了解红外二、标准库的代码1.infrared.c2.infrared.h3.main.c4 现象 总结 前言 红外线:频率介于微波与可见光之间的电磁波。 参考如下 【STM32】标准库与HAL库对照学习教程外设篇–红外避障传感器 光电红外传感器详解&#…

SpringCloud Alibaba-01 入门简介

1.Spring Cloud Alibaba 是由阿里巴巴结合自身丰富的微服务实践而推出的微服务开发的一站式解决方案。它是 Spring Cloud 生态中的第二代实现,提供了包括服务注册与发现、分布式配置管理、服务限流降级、消息驱动能力、阿里云对象存储、分布式任务调度等在内的多种功…

C语言-数据结构 折半查找

在折半查找中,刚开始学可能会在下标处产生困惑,例如奇数个长度的数组怎么处理,偶数个长度的数组怎么处理,不需要修改代码吗?并且下标我从1开始算和0开始算影响代码吗?其实都可以用一样的代码,产…

Java项目-----图形验证码登陆实现

原理: 验证码在前端显示,但是是在后端生成, 将生成的验证码存入redis,待登录时,前端提交验证码,与后端生成的验证码比较. 详细解释: 图形验证码的原理(如下图代码).前端发起获取验证码的请求后, 1 后端接收请求,生成一个键key(随机的键) 然后生成一个验证码作为map的valu…

蒙特卡罗方法 - 不同的峰值之间的混合挑战篇

序言 蒙特卡罗方法,也称为统计模拟法或统计试验法,是一种以概率统计理论为基础的数值模拟方法。自 20 20 20世纪 40 40 40年代中期提出以来,它因能灵活处理复杂计算问题而广泛应用于多个领域,如金融工程学、宏观经济学和计算物理…

Transformer 模型和 BERT 模型:概述

语言模型发展历程Language modeling history 多年来,语言建模一直在不断发展。过去十年的最新突破,包括使用神经网络来表示文本,比如2013年的Word2vec和N元语法,2014年开发的序列到序列模型,如RNN和LSTM帮助提高机器学…

(C语言贪吃蛇)16.贪吃蛇食物位置随机(完结撒花)

目录 前言 修改方向 修改内容 效果展示 两个新的问题🙋 1.问题1 2.问题2 代码如下: 前言 我们上一节实现了贪吃蛇吃食物身体节点变长,但是食物的刷新位置不是随机的,并且初始化几次后食物就刷不见了,本节我们就来…

[AWS云]kafka调用和创建

背景:因为因为公司的项目需要使用AWS的kafka,但是在创建和使用过程中都遇到了一些报错和麻烦,毕竟老外的东西,和阿里云、华为使用起来还是不一样。 一、创建(创建的配置过程就略了,就是配置一下可用区、型号&#xff0…

RNN心脏病预测

本文为为🔗365天深度学习训练营内部文章 原作者:K同学啊 一 前期准备 1.数据导入 import pandas as pd from keras.optimizers import Adam from matplotlib import pyplot as plt from sklearn.model_selection import train_test_split from sklearn.p…

Flink job的提交流程

在Flink中,作业(Job)的提交流程是一个复杂的过程,涉及多个组件和模块,包括作业的编译、优化、序列化、任务分发、任务调度、资源分配等。Flink通过分布式架构来管理作业的生命周期,确保作业在不同节点上以高…

std::future::then的概念和使用方法

std::future::then是 C 中用于异步操作的一种机制,它允许在一个异步任务完成后,接着执行另一个操作(即延续操作)。以下是关于 std::future::then 的概念和使用方法: 1. 概念: std::future::then 的主要目…

python 边际分布图

import seaborn as snspenguins sns.load_dataset("penguins") colors {"Gentoo": #AE5259, "Adelie": #CF992C, "Chinstrap": #6B9DAA}# 分类散点图 sns.jointplot(datapenguins, x"bill_length_mm", y"bill_depth_…

MyBatisPlus分页查询

一、导入依赖 <!-- MyBatis-plus的依赖 --> <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.4</version> </dependency><!-- mysql的依赖 --> &l…

CocosCreator 快速部署 TON 游戏:Web2 游戏如何使用 Ton支付

在本篇文章中&#xff0c;我们将继续探讨如何使用 Cocos Creator 开发 Telegram 游戏&#xff0c;重点介绍如何集成 TON 支付功能。通过这一教程&#xff0c;开发者将学会如何在游戏中接入 TON Connect&#xff0c;实现钱包连接、支付以及支付后的校验流程&#xff0c;最终为 W…

贴吧软件怎么切换ip

在网络使用中&#xff0c;有时我们需要切换IP地址来满足特定的需求&#xff0c;比如需要切换贴吧软件IP以进行不同的操作。本文将介绍几种贴吧切换IP地址的方法&#xff0c;帮助用户更好地管理自己的网络身份和访问权限。 1、更换网络环境‌ 通过连接到不同的Wi-Fi网络或使用移…

TON生态小游戏开发:推广、经济模型与UI设计的建设指南

随着区块链技术的快速发展&#xff0c;基于区块链的Web3游戏正引领行业变革。而TON生态小游戏&#xff0c;借助Telegram庞大的用户基础和TON&#xff08;The Open Network&#xff09;链上技术&#xff0c;已成为这一领域的明星之一。国内外开发者正迅速涌入&#xff0c;开发和…

【开源】RISC-V 修改neofetch中的Host描述

neofetch 介绍 neofetch 是一款用于在终端中显示系统信息的工具&#xff0c;其主要特点是以美观的方式展示宿主机的基本信息。它通常用于展示系统的分发版本、内核版本、硬件信息、桌面环境&#xff0c;以及一些个性化的设置&#xff0c;配合 ASCII 艺术风格的 logo&#xff0…