el-table 动态计算合并行

原始表格及代码

在这里插入图片描述

<el-table
  :data="tableData"
  class="myTable"
  header-row-class-name="tableHead"
>
  <el-table-column prop="date" label="日期"> </el-table-column>
  <el-table-column prop="name" label="姓名"> </el-table-column>
  <el-table-column prop="project" label="项目"> </el-table-column>
  <el-table-column prop="address" label="地址" min-width="200">
  </el-table-column>
</el-table>
// 模拟数据接口请求并排序
getDataMock() {
  for (var i = 0; i < 10; i++) {
    let randomDay = Math.floor(Math.random() * 5 + 1);
    this.tableData.push({
      date: "2024-12-" + randomDay,
      name: "王小虎" + i,
      project: "项目" + i,
      address: "上海市普陀区金沙江路 " + i + " 弄",
    });
  }
  this.tableData.sort((a, b) => {
    let time1 = new Date(a.date).getTime();
    let time2 = new Date(b.date).getTime();
    return time1 - time2;
  });
},
.myTable {
  width: 700px;
  margin: 0 auto;
  border-radius: 20px;
  .tableHead {
    .el-table__cell {
      background-color: #bee7c5;
      color: #264f30;
      border-bottom: none;
      &:first-child {
        background: #435f5b;
        color: #fff;
      }
    }
  }
  .el-table__body {
    .el-table__row {
      .el-table__cell {
        background: #f7f7f7;
        border-bottom: 1px solid #dcdcdc;
        &:first-child {
          background: #acb2d9;
          color: #32405b;
          font-weight: bold;
          border-bottom: 1px solid #32405b;
        }
      }
    }
  }
}

合并行

  • 需要动态计算表格数据的合并行数
  • 如图所示,需要得到如下的 rowspan
    在这里插入图片描述
  • 计算表格数据每行的 rowspan
// 动态计算合并行的索引
getTableDataSpan(arr) {
  let spanData = []; // 数据数组的 rowspan 集合
  // rowspan > 1,合并行
  // rowspan == 1,单独行,不参与合并
  // rowspan == 0,被合并的行
  let lastRowIndex = 0; // 记录索引
  arr.forEach((item, index) => {
    if (index == 0) {
      // 第一行,默认认为不参与合并,记录为 1
      spanData.push(1);
    } else {
      if (item.date == arr[index - 1].date) {
        // 当前行的 date 与上一行的 date 相同,即当前行 的 rowspan 需要被记为 0
        spanData.push(0);
        // 向前找上次记录的索引,即需要当前行合并过去的目标行,使目标行的 rowspan 值加一
        spanData[lastRowIndex] += 1;
      } else {
        // 当前行的 date 与上一行的 date 不相等,则当前行的 rowspan 记录为 1
        spanData.push(1);
        // 暂且记录一下 lastRowIndex
        // 如果下一行与当前行的 date 值相同,就会合并到当前行,否则会更新 lastRowIndex 的值,进行下次对比
        lastRowIndex = index;
      }
    }
  });
  return {
    spanData: spanData,
    lastRowIndex: lastRowIndex,
  };
},
  • 计算 span-method 属性
 <el-table
   :data="tableData"
   class="myTable"
   header-row-class-name="tableHead"
   :span-method="spanMethod"
 >
 ...
spanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    // 只有第一列需要合并,所以限定为 columnIndex === 0
    // 获取当前行的 rowspan
    let rowspan = this.getTableDataSpan(this.tableData).spanData[rowIndex];
    let colspan = rowspan === 0 ? 0 : 1; // 被合并到其他行,需要为 colspan 赋值为 0,否则为 1
    return {
      rowspan: rowspan,
      colspan: colspan,
    };
  }
},

样式调整优化

  • 上述代码得到如下效果
  • 原因是被合并的行,删掉了首列,被赋予了 first-child 的样式

在这里插入图片描述

  • 调整样式,为首列元素动态赋予类名
<el-table
  :data="tableData"
  class="myTable"
  header-row-class-name="tableHead"
  :span-method="spanMethod"
  :cell-class-name="cellClassName"
>
...
cellClassName({ row, column, rowIndex, columnIndex }) {
 if (columnIndex === 0) {
    return "colorBox"; // 首列添加类名
  }
},
.el-table__body {
.el-table__row {
   .el-table__cell {
     background: #f7f7f7;
     border-bottom: 1px solid #dcdcdc;
     &.colorBox {
       background: #acb2d9;
       color: #32405b;
       font-weight: bold;
       border-bottom: 1px solid #32405b;
     }
   }
 }
}
  • 效果如图,会发现,动态赋予的 colorBox 类名,并没有被加到被合并的行的首列元素上
    在这里插入图片描述

完整代码段

<template>
  <div class="tableBox">
    <el-table
      :data="tableData"
      class="myTable"
      header-row-class-name="tableHead"
      :span-method="spanMethod"
      :cell-class-name="cellClassName"
    >
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="project" label="项目"> </el-table-column>
      <el-table-column prop="address" label="地址" min-width="200">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "dataList",
  components: {},
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getDataMock();
  },
  methods: {
    getDataMock() {
      for (var i = 0; i < 10; i++) {
        let randomDay = Math.floor(Math.random() * 5 + 1);
        this.tableData.push({
          date: "2024-12-" + randomDay,
          name: "王小虎" + i,
          project: "项目" + i,
          address: "上海市普陀区金沙江路 " + i + " 弄",
        });
      }
      this.tableData.sort((a, b) => {
        let time1 = new Date(a.date).getTime();
        let time2 = new Date(b.date).getTime();
        return time1 - time2;
      });
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "colorBox";
      }
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 只有第一列需要合并,所以限定为 columnIndex === 0
        // 获取当前行的 rowspan
        let rowspan = this.getTableDataSpan(this.tableData).spanData[rowIndex];
        let colspan = rowspan === 0 ? 0 : 1; // 被合并到其他行,需要为 colspan 赋值为 0,否则为 1
        return {
          rowspan: rowspan,
          colspan: colspan,
        };
      }
    },
    // 动态计算合并行的索引
    getTableDataSpan(arr) {
      let spanData = []; // 数据数组的 rowspan 集合
      // rowspan > 1,合并行
      // rowspan == 1,单独行,不参与合并
      // rowspan == 0,被合并的行
      let lastRowIndex = 0; // 记录索引
      arr.forEach((item, index) => {
        if (index == 0) {
          // 第一行,默认认为不参与合并,记录为 1
          spanData.push(1);
        } else {
          if (item.date == arr[index - 1].date) {
            // 当前行的 date 与上一行的 date 相同,即当前行 的 rowspan 需要被记为 0
            spanData.push(0);
            // 向前找上次记录的索引,即需要当前行合并过去的目标行,使目标行的 rowspan 值加一
            spanData[lastRowIndex] += 1;
          } else {
            // 当前行的 date 与上一行的 date 不相等,则当前行的 rowspan 记录为 1
            spanData.push(1);
            // 暂且记录一下 lastRowIndex
            // 如果下一行与当前行的 date 值相同,就会合并到当前行,否则会更新 lastRowIndex 的值,进行下次对比
            lastRowIndex = index;
          }
        }
      });
      return {
        spanData: spanData,
        lastRowIndex: lastRowIndex,
      };
    },
  },
};
</script>
<style lang="less" scoped>
.tableBox {
  background: #fff;
  padding: 50px 0;
  /deep/ .myTable {
    width: 700px;
    margin: 0 auto;
    border-radius: 20px;
    .tableHead {
      .el-table__cell {
        background-color: #bee7c5;
        color: #264f30;
        border-bottom: none;
        &:first-child {
          background: #435f5b;
          color: #fff;
        }
      }
    }
    .el-table__body {
      .el-table__row {
        .el-table__cell {
          background: #f7f7f7;
          border-bottom: 1px solid #dcdcdc;
          &.colorBox {
            background: #acb2d9;
            color: #32405b;
            font-weight: bold;
            border-bottom: 1px solid #32405b;
          }
        }
      }
    }
  }
}
</style>

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

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

相关文章

深圳国威HB1910数字IP程控交换机 generate.php 远程命令执行漏洞复现

0x01 产品描述: 深圳国威主营国威模拟、数字、IP 交换机、语音网关、IP 电话机及各种电话机。深圳国威电子有限公司HB1910是一款功能强大的网络通信设备,适用于各种企业通信需求。 0x02 漏洞描述: 深圳国威电子有限公司HB1910数字IP程控交换机generate.php存在远程命令执行…

数据结构(链表)JAVA方法的介绍

注意&#xff1a; 1.我们从上图中可以看出链表LinkedList继承于List接口&#xff1a; 如果不懂List接口的朋友们可以先看我上期作品了解一下List接口 数据结构&#xff08;顺序表&#xff09;JAVA方法的介绍-CSDN博客 2.本期注重讲解Java中LinkedList链表中个方法的使用&am…

UE5中实现Billboard公告板渲染

公告板&#xff08;Billboard&#xff09;通常指永远面向摄像机的面片&#xff0c;游戏中许多技术都基于公告板&#xff0c;例如提示拾取图标、敌人血槽信息等&#xff0c;本文将使用UE5和材质节点制作一个公告板。 Gif效果&#xff1a; 网格效果&#xff1a; 1.思路 通过…

文件包含 0 1学习

漏洞原理 成因 文件包含漏洞是一个最常见的依赖与脚本运行而影响Web应用程序的漏洞.当应用程序使用攻击者控制的变量建立一个可执行代码的路径,允许攻击者控制在运行时执行哪个文件时,就会导致文件包含漏洞.程序开发人员通常会把可重复使用的函数写入单文件中,在使用这些函数…

docker login 出错 Error response from daemon

在自己的Linux服务器尝试登陆docker出错 输入完用户密码之后错误如下&#xff1a; 解决方案 1.打开daemo文件&#xff1a; vim/etc/docker/daemon.json 2.常用的国内Docker 镜像源地址 网易云 Docker 镜像&#xff1a;http://hub-mirror.c.163.com 百度云 Docker 镜像&#x…

专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。

考研落幕&#xff0c;本人本中游211&#xff0c;如愿以偿考入浙江大学&#xff0c;专业课842信号系统与数字电路140&#xff0c;总分410&#xff0c;和考前多次模考预期差距不大&#xff08;建议大家平时做好定期模考测试&#xff0c;直接从实战分数中&#xff0c;找到复习的脉…

【html网页页面012】html+css制作品牌主题宏宝莱网页含视频、留言表单(7页面附效果及源码)

品牌主题宏宝莱网页制作 &#x1f964;1、写在前面&#x1f367;2、涉及知识&#x1f333;3、网页效果完整效果(7页)&#xff1a;代码目录结构&#xff1a;page1、首页page2、衍生品page3、包装设计page4、视频介绍page5、留言板page6、联系我们page7、详情页&#xff08;三层页…

Unity 获取鼠标点击位置物体贴图颜色

实现 Ray ray Camera.main.ScreenPointToRay(Input.mousePosition); if (Physics.Raycast(ray, out RaycastHit hit)) {textureCoord hit.textureCoord;textureCoord.x * textureMat.width;textureCoord.y * textureMat.height;textureColor textureMat.GetPixel(Mathf.Flo…

游戏引擎学习第50天

仓库: https://gitee.com/mrxiao_com/2d_game Minkowski 这个算法有点懵逼 回顾 基本上&#xff0c;现在我们所处的阶段是&#xff0c;回顾最初的代码&#xff0c;我们正在讨论我们希望在引擎中实现的所有功能。我们正在做的版本是初步的、粗略的版本&#xff0c;涵盖我们认…

Mac备忘录表格中换行(`Option` + `Return`(回车键))

在Mac的ARM架构设备上&#xff0c;如果你使用的是Apple的原生“备忘录”应用来创建表格&#xff0c;换行操作可以通过以下步骤来实现&#xff1a; 在单元格中换行&#xff1a; 双击你想要编辑的单元格你可以输入文本&#xff0c;按Option&#xff08;⌥&#xff09; Enter来插…

蜂鸟视图微程序:低代码赋能室内导航应用开发

随着数字化转型的深入&#xff0c;室内导航应用的需求日益增加。然而&#xff0c;传统的开发模式往往成本高、周期长、门槛高&#xff0c;给企业带来诸多挑战。 蜂鸟视图微程序应运而生&#xff0c;通过低代码技术赋能开发者&#xff0c;快速构建高性能室内地图导航应用&#…

#渗透测试#漏洞挖掘#红蓝攻防#SRC漏洞挖掘

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

http 502 和 504 的区别

首先看一下概念&#xff1a; 502&#xff1a;作为网关或者代理工作的服务器尝试执行请求时&#xff0c;从上游服务器接收到无效的响应。503&#xff1a;由于临时的服务器维护或者过载&#xff0c;服务器当前无法处理请求。这个状况是临时的&#xff0c;并且将在一段时间以后恢…

ES6 混合 ES5学习记录

基础 数组 let arr [数据1&#xff0c;数据2&#xff0c;...数组n] 使用数组 数组名[索引] 数组长度 arr.length 操作数组 arr.push() 尾部添加一个,返回新长度 arr.unshift() 头部添加一个,返回新长度 arr.pop() 删除最后一个,并返回该元素的值 shift 删除第一个单元…

编写php项目所需环境

需要编写php项目&#xff0c;需要看到编写的代码展现的效果&#xff0c;这里我选择用xampp来展现 准备工作&#xff1a; https://learncodingfast.com/how-to-install-xampp-and-brackets/#Installing_and_Running_XAMPP xampp下载地址&#xff1a;https://www.apachefriends.…

吉林大学机器学习复习

第一章、绪论&#xff1a; 相关概念&#xff1a; 训练集&#xff1b;评估函数&#xff08;目标函数、代价函数&#xff09;&#xff1b;梯度下降&#xff1b;机器学习算法的分类 机器学习是什么&#xff1a;寻找一个函数&#xff08;模型&#xff09;。 机器学习的基本流程&…

解决MAC装win系统投屏失败问题(AMD显卡)

一、问题描述 电脑接上HDMI线后&#xff0c;电脑上能显示有外部显示器接入&#xff0c;但是外接显示器无投屏画面 二、已测试的方法 1 更改电脑分辨&#xff0c;结果无效 2 删除BootCamp&#xff0c;结果无效 3更新电脑系统&#xff0c;结果无效 4 在设备管理器中&#…

数据结构 ——哈希表

数据结构 ——哈希表 1、哈希表的概念 概念参考 算法数据结构基础——哈希表&#xff08;Hash Table&#xff09; 2、代码实现 下面是用数组实现哈希结构&#xff0c;开放地址法解决冲突的简单哈希表操作 #include <stdio.h> #include <stdlib.h> #include <s…

OpenCV实验篇:识别图片颜色并绘制轮廓

第三篇&#xff1a;识别图片颜色并绘制轮廓 1. 实验原理 颜色识别的原理&#xff1a; 颜色在图像处理中通常使用 HSV 空间来表示。 HSV 空间是基于人类视觉系统的一种颜色模型&#xff0c;其中&#xff1a; H&#xff08;Hue&#xff09;&#xff1a;色调&#xff0c;表示颜色…

SpringBoot【八】mybatis-plus条件构造器使用手册!

一、前言&#x1f525; 环境说明&#xff1a;Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 经过上一期的mybatis-plus 入门教学&#xff0c;想必大家对它不是非常陌生了吧&#xff0c;这期呢&#xff0c;我主要是围绕以下几点展开&#xff0c;重点给大家介绍 里…