el-table找出当前单元格与对应的上下列的值

news2024/11/25 12:23:53

当前单元格与对应的上下列的值如果不相同就设置个红色边框

  • 当前单元格与对应的上下列的值如果不相同就设置个红色边框

当前单元格与对应的上下列的值如果不相同就设置个红色边框

以下是示例代码,对tableData数据的name字段进行处理
如果当前name值与上一条数据的name值 或者 下一条数据的name值 不相等,就设置红色边框。

<template>
  <el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align': 'center'}" :cell-style="cellStyle">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 设置默认居中显示
      let cellStyleStr = 'text-align: center;';
      // 如果只有1条数据直接返回
      if (this.tableData && this.tableData.length === 1) return cellStyleStr;
      if (column.label === '姓名') {
        // 如果是第1行数据(这里rowIndex === 0是第1行数据),并且 当前行的name(row.name是当前行的数据) 不等于 下一行的name(这里用tableData[rowIndex + 1]表示下一行的数据, 用tableData[rowIndex - 1]表示上一行的数据)
        if (rowIndex === 0 && row.name !== this.tableData[rowIndex + 1].name) {
          cellStyleStr += 'border: 1px solid red'
          // rowIndex > 0是第二行到倒数第二行的数据
        }else if (rowIndex > 0 && rowIndex < this.tableData.length - 1 && (row.name !== this.tableData[rowIndex + 1].name || row.name !== this.tableData[rowIndex - 1].name)) {
          cellStyleStr += 'border: 1px solid red';
          // rowIndex === this.tableData.length - 1是最后一行的数据
        }else if (rowIndex === this.tableData.length - 1 && row.name !== this.tableData[rowIndex - 1].name) {
          cellStyleStr += 'border: 1px solid red';
        }
      }
      return cellStyleStr;
    }
  }
}
</script>

结果,第4行没有边框是因为它对应的上一个单元格和下一个单元格的值都是一样的。
在这里插入图片描述

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

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

相关文章

如何为HashMap设置初始化大小

如何为HashMap设置初始化大小 1.阿里巴巴代码规范的要求2.使用阿里巴巴插件扫描时3. 源码3.1 当初始化不设置大小时3.2 当初始化设置大小时 4. 测试附录 1.阿里巴巴代码规范的要求 2.使用阿里巴巴插件扫描时 3. 源码 3.1 当初始化不设置大小时 Map<Integer, BigDecimal>…

【计算机视觉】DINOv2(视觉大模型)代码四个不同模型的对比,以 28 * 28 的图像为例(完整的源代码)

文章目录 一、ViT-S/14二、ViT-B/14三、ViT-L/14四、ViT-g/14 一、ViT-S/14 import torch import torchvision.transforms as T import matplotlib.pyplot as plt import numpy as np import matplotlib.image as mpimg from PIL import Image from sklearn.decomposition im…

王道考研数据结构第七章知识点总结

7.1 查找的基本概念 注&#xff1a;查找表并不是一种新的数据结构&#xff0c;它只是对于你需要查找的一类数据结构的一类统称而已 7.2.1 顺序查找 注&#xff1a;学会画查找判定树 7.2.2 折半查找(模拟算法流程详见课件) 实现流程&#xff1a;略&#xff0c;见王道课件 mid如…

Java项目查询统计表中各状态数量

框架&#xff1a;SpringBoot&#xff0c;Mybatis&#xff1b;数据库&#xff1a;MySQL 表中设计2个状态字段&#xff0c;每个字段有3种状态&#xff0c;统计这6个状态各自的数量 sql查询语句及结果如图 SQL&#xff1a; SELECT SUM(CASE WHEN A0 THEN 1 ELSE 0 END) AS A0…

普华(Autosar OS开发)第一部分

普华灵智基础软件平台产品手册 一、基本情况 普华基础软件自2009年起深耕AUTOSAR车用基础软件领域,作为AUTOSAR组织高级合作伙伴,拥有强大的AUTOSAR专业技术团队。普华基础软件为国内各大OEM整车厂和主要的零部件供应商提供基于AUTOSAR标准的国产化汽车电子基础软件平台、开…

Linux内核结构与特性简介

系统调用接口&#xff1a;位于最上层&#xff0c;实现了一些基本的功能&#xff0c;如read和write等系统调用。这是用户空间程序与内核交互的接口&#xff0c;提供了对内核功能的访问。 内核代码&#xff1a;位于系统调用接口之下&#xff0c;可以看作是独立于体系结构的通用内…

Excel之VLOOKUP()函数介绍

Excel之VLOOKUP()函数介绍 Excel的VLOOKUP函数语法&#xff1a; VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup]) 参数说明&#xff1a; lookup_value&#xff1a;要查找的值或要比较的值。 table_array&#xff1a;包含要在其中进行查找的数据表的区…

电力载波与485抄表哪个抗干扰能力强

随着物联网技术的不断发展&#xff0c;自动化抄表系统已经逐渐替代了传统的手工抄表方式。其中&#xff0c;电力载波和485抄表是两种常见的自动化抄表方式。本文将从抗干扰能力的角度出发&#xff0c;对比两种抄表方式的优缺点&#xff0c;探讨哪种抄表方式更具优势。 一、电力…

东方通信基于 KubeSphere 的云计算落地经验

作者&#xff1a;周峰 吴昌泰 公司简介 东方通信股份有限公司&#xff08;以下简称“东方通信”&#xff09;创立于 1958 年&#xff0c;是一家集硬件设备、软件、服务为一体的整体解决方案提供商。公司于 1996 年成功改制上市&#xff0c;成为上海证交所同时发行 A 股和 B 股…

听GPT 讲K8s源代码--pkg(六)

pkg/kubelet/cm 目录是 Kubernetes 源代码中的一个目录&#xff0c;包含了 kubelet 组件中的 ConfigMap 相关代码。 在 Kubernetes 中&#xff0c;ConfigMap 是一种用于存储非机密数据的 API 对象类型&#xff0c;它可以用来存储配置信息、环境变量、命令行参数等等。 kubelet …

【人工智能】xAI——“X宇宙”又增添了一位新成员

个人主页&#xff1a;【&#x1f60a;个人主页】 &#x1f31e;热爱编程&#xff0c;热爱生活&#x1f31e; 文章目录 前言xAI团队成员做解开宇宙本质的AI 前言 有人问他&#xff0c;xAI公司是干啥的&#xff1f;马斯克的回答引用了其偶像、科幻作家道格拉斯・亚当斯的话&…

哇~真的是你呀!今天是LINUX中的RSYNC服务

目录 前言 一、概述 二、特性 三、rsync传输模式 四、rsync应用 五、格式 六、配置文件 七、守护进程传输 八、rsyncinotfy实时同步 一、概述 rsync是linux 下一个远程数据同步工具;他可通过LAN/WAN快速同步多台主机间的文件和目录&#xff0c;并适当利用rsync 算法减少数据的…

[读论文]---On Distillation of Guided Diffusion Models

该论文解决的问题 1 简要描述 2 在之前的工作中存在下述问题 计算过程需要计算: 1 unconditional的unet 2 conditional(w text)的unet 下图展示了计算过程 对应的代码 pipelines-> stable_diffusion-> pipline_stable_diffusion.py-> StableDiffusionPipeling-> 7…

vue-cli多页面配置(vue2.0)

目录 概述 多页面的配置 步骤1&#xff1a;编写配置文件 vue.config.js 步骤2&#xff1a;在src目录下创建目录pages 步骤3&#xff1a;创建HTML文件&#xff08;主组件挂载点&#xff09; 测试 完毕&#xff0c;总结 概述 我们知道使用vue脚手架vue-cli创建的项目默认是…

Python 集合 add()函数使用详解,集合添加元素

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;小白零基础《Python入门到精通》 add函数使用详解 1、元素的顺序2、可以添加的元素类型3、添加重复的元素4、一次只…

TRT4-trt-integrate - 1 YOLOV5导出、编译、推理

模型导出 修改Image的Input动态维度 首先可以看到这个模型导出的时候Input有三个维度都是动态&#xff0c;而我们之前说过只需要一个batch维度是动态&#xff0c;所以要在export的export onnx 进行修改&#xff0c;将 torch.onnx.export(model, im, f, verboseFalse, opset_ver…

百度翻译申请KEY和ID

1.进入百度翻译网址:https://api.fanyi.baidu.com/ 2.右上角登录账号 3.跟着点点点 填写申请信息&#xff0c;剩下不用写 4.跳转到https://api.fanyi.baidu.com/api/trans/product/desktop 在底部查看KEY和ID

每日一题2023.7.19|ACM模式

文章目录 C的输入方式介绍cin>>cin.get(字符变量名)cin.get(数组名,接收字符数目)cin.get()cin.getline() getline()gets()getchar() AB问题|AB问题||AB问题|||ABⅣAB问题ⅤAB问题Ⅵ C的输入方式介绍 参考博客 cin>> 最基本&#xff0c;最常用的字符或者数字的输…

产品管理必备工具:选择最适合你的工具,让产品管理更高效!

Zoho Projects是一个能够帮助企业组织高效研发工作、快速推向市场并赢得用户青睐的有效工具。通过以下六个步骤&#xff0c;企业可以最大化地利用Zoho Projects&#xff0c;实现高效的产品研发和运营。 第一步&#xff1a;规划产品路线 在甘特图上勾画产品路线图&#xff0c;为…

STM32单片机示例:多个定时器同步触发启动

文章目录 前言基础说明关键配置与代码其它补充示例链接 前言 多个定时器同步触发启动是一种比较实用的功能&#xff0c;这里将对此做个示例说明。 基础说明 该示例演示通过一个TIM使能时同步触发使能另一个TIM。 本例中使用TIM1作为主机&#xff0c;使用TIM1的使能信号作为…