element-plus表格合并

news2024/11/16 10:39:38

要实现这样的表格, 怎么做呢?

甚至是这种三级的呢?

官网的案例也是通过这个方法进行配置的,也就是说表格长什么样,关键在怎么处理的方法上。

 这是官网的方法,可参考拓展:

const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

不过它这里的方法并不符合我的要求,假如还有四级的呢?

 话不多说,给我的代码,相关注释有说明:

<template>
  <div class="container">
    <Commonhead :title="title"></Commonhead>
    <div class="table">
      <el-table
        :span-method="objectSpanMethod"
        ref="multipleTableRef"
        border
        :data="list"
      >
        <el-table-column label="类型" prop="str1" min-width="180" />
        <el-table-column label="考核内容" prop="str2" min-width="180" />
        <el-table-column label="结果" prop="str3" min-width="180" />
        <el-table-column label="备注" prop="str4" min-width="180" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import Commonhead from "../src/components/Commonhead.vue";
const title = ref("项目管理 > 巡检记录 > 巡检记录详情");
onMounted(() => {
  dealList();
});

const multipleTableRef = ref();
const list = ref([
  // 忽略表格合并,每一行的数据,str1-6,代表几级数据,也可以简易理解为第几列的数据(从上往下顺序)
  {
    str1: "遵章守法",
    str2: "(1)工作时间打牌、下棋、串岗或无故脱岗",
    str3: "是",
    str4: "备注内容备注内容备注内容",
  },
  {
    str1: "遵章守法",
    str2: "(2)上班时睡觉、在禁烟区内吸烟、吃东西、看书报、听收音机及做与工作无关的事情",
    str3: "不是",
    str4: "无",
  },
  {
    str1: "岗位职责",
    str2: "(1)未认真履行岗位职责,保洁工作达不到质量标准,未造成影响和损失",
    str3: "不是",
    str4: "无",
  },
]);

// 当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex
// 表格合并的方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 返回一个包含两个元素的数组,第一个元素代表 rowspan,第二个元素代表 colspan
  if (columnIndex === 0) {
    return {
      rowspan: row.rowspan,
      colspan: row.colspan,
    };
  } else if (columnIndex === 1) {
    return {
      rowspan: row.rowspan2,
      colspan: row.colspan2,
    };
  } else if (columnIndex === 2) {
    return {
      rowspan: row.rowspan3,
      colspan: row.colspan3,
    };
  } else {
    return {
      rowspan: 1,
      colspan: 1,
    };
  }
};

// 处理列表
const dealList = () => {
  if (list.value.length === 0) return;
  list.value.forEach((item, index) => {
    item.colspan = 1;
    item.rowspan = 1;
    item.colspan2 = 1;
    item.rowspan2 = 1;
    item.colspan3 = 1;
    item.rowspan3 = 1;
  });
  list.value.reverse()
  
  for (let i = 0; i < list.value.length; i++) {
    // 列合并处理
    if (
      i + 1 < list.value.length &&
      list.value[i].str1 == list.value[i + 1].str1
    ) {
      list.value[i + 1].rowspan = list.value[i].rowspan + 1;
      list.value[i].rowspan = 0;
    }
    if (
      i + 1 < list.value.length &&
      list.value[i].str2 == list.value[i + 1].str2
    ) {
      list.value[i + 1].rowspan2 = list.value[i].rowspan2 + 1;
      list.value[i].rowspan2 = 0;
    }
    if (
      i + 1 < list.value.length &&
      list.value[i].str3 == list.value[i + 1].str3
    ) {
      list.value[i + 1].rowspan3 = list.value[i].rowspan3 + 1;
      list.value[i].rowspan3 = 0;
    }
    // 行合并处理
    if (list.value[i].str2 == "") {
      list.value[i].colspan = 2;
      list.value[i].colspan2 = 0;
      list.value[i].colspan3 = 0;
    }
    if (list.value[i].str3 == "") {
      list.value[i].colspan = 1;
      list.value[i].colspan2 = 2;
      list.value[i].colspan3 = 0;
    }
    if (list.value[i].str3 != "") {
      list.value[i].colspan = 1;
      list.value[i].colspan2 = 1;
      list.value[i].colspan3 = 1;
    }
  }
  list.value.reverse();
};

// 整理数据列表的数据,将相同的数据段合并
const dataSort = (a, b) => {
  if (a["str1"] == b["str1"]) {
    if (a["str2"] == b["str2"]) {
      if (a["str3"] < b["str3"]) {
        return -1;
      }
    } else {
      if (a["str2"] < b["str2"]) {
        return -1;
      } else {
        return 1;
      }
    }
  } else {
    if (a["str1"] < b["str1"]) {
      return -1;
    } else {
      return 1;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.table {
  width: 1000px;
  margin: 0 auto;
}
</style>

将每一条数据进行遍历,相关的字段把它合并在一起。可以简单理解为本来都没有合并,每一条从上往下为每一行,要是有相同的字段,就把单元格合并。(例如:俩个1,只取一个1)。

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

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

相关文章

SLAM ORB-SLAM2(21)基础矩阵的计算和评分

SLAM ORB-SLAM2&#xff08;21&#xff09;基础矩阵的计算和评分 1. 前言2. 基础矩阵2.1. 对级约束2.2. 推导2.3. 计算原理 3. ComputeF214. CheckFundamental 1. 前言 在 《SLAM ORB-SLAM2&#xff08;20&#xff09;查找基础矩阵》 中了解到 查找基础矩阵主要过程&#xff1…

nginx 配置浏览器不缓存文件 每次都会从服务器 请求新的文件

目录 解决问题方法说明 测试html环境js环境第一步然后修改内容 打开带有js缓存的页面强制刷新 配置nginx 每次打开页面都会重新请求index.js 文件重启nginx再次修改index.js 总结设置为全局 解决问题 适用于实时更新数据的&#xff0c;网页 可以让用户每次都是重新请求&#x…

《从0开始搭建实现apollo9.0》系列三 CANBUS模块解读

二、CANBUS代码 1、canbus模块的软件架构如下&#xff1a; 主要输入输出 输入&#xff1a;apollo::control::ControlCommand | 控制指令 输出&#xff1a; /apollo/chassis | apollo::canbus::Chassis | 车辆底盘信息接口数据&#xff0c;包括车辆速度、方向盘转角、档位、底盘…

Vue Html中插入本地视频(Video 标签)

在 Vue 中插入本地视频可以通过使用标签来实现。你可以将视频文件放在你的项目中的合适位置&#xff08;比如assets文件夹&#xff09;&#xff0c;然后在 Vue 组件中引用这个视频文件。html同理 首先&#xff0c;在你的 Vue 项目中的assets文件夹下放入你的视频文件&#xff…

兼容性比较好的浏览器推荐(2023手机浏览器排名)

浏览器在我们日常工作生活占据着重要的位置。浏览器是电脑的必备软件&#xff0c;也是手机端不可缺少的软件之一。如果你想要下载浏览器&#xff0c;却不知道哪个浏览器最好用&#xff0c;那么就看看本篇文章。下文给大家推荐2023年最热门、好用的手机浏览器&#xff0c;排行不…

计算机网络【网络安全】

计算机网络——网络安全 一、网络安全问题概述 网络安全威胁 网络安全面临两大类威胁&#xff0c;被动攻击和主动攻击 被动攻击 指攻击者从网络上窃听他人的通信内容&#xff0c;通常把这类攻击称为截获。 主动攻击 篡改 攻击者故意篡改网络上传送的报文 恶意程序 拒绝服…

java实现图片转pdf,并通过流的方式进行下载(前后端分离)

首先需要导入相关依赖&#xff0c;由于具体依赖本人也不是记得很清楚了&#xff0c;所以简短的说一下。 iText&#xff1a;PDF 操作库&#xff0c;用于创建和操作 PDF 文件。可通过 Maven 或 Gradle 引入 iText 依赖。 MultipartFile&#xff1a;Spring 框架中处理文件上传的类…

day08_分类品牌管理商品规格管理商品管理

文章目录 1 分类品牌管理1.1 菜单添加1.2 表结构介绍1.3 页面制作1.4 品牌列表加载1.4.1 后端接口BrandControllerBrandServiceBrandMapperBrandMapper.xml 1.4.2 前端对接brand.jscategoryBrand.vue 1.5 分类数据加载1.6 列表查询1.6.1 需求说明1.6.2 后端接口需求分析Categor…

软考基础知识2

1.DMA控制方式&#xff1a;直接内存存取。数据在内存与I/O设备间直接成块传送&#xff0c;不需要CPU的任何干涉&#xff0c;由DMA硬件直接执行完成。 例题&#xff1a; 2.程序计数器总是存下一个指令的地址。 例题&#xff1a; 3.可靠度的计算&#xff1a; 例题&#xff1a…

低碳策略全都有!EI论文:计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度程序代码!

适用平台&#xff1a;MatlabYalmipCplex 参考文献&#xff1a;《计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度》-电网技术 程序建立了碳交易市场下的计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度模型&#xff0c;鉴于该模型具有高维非线性特点&#xff0c;求…

蓝桥杯算法题汇总

一.线性表&#xff1a;链式 例题&#xff1a;旋转链表 二.栈&#xff1a; 例题&#xff1a;行星碰撞问题 三.队列 三.数组和矩阵 例题&#xff1a;

亿道信息轻工业三防EM-T195,零售、制造、仓储一网打尽

厚度仅10.5mm&#xff0c;重量仅0.65千克的EM-T195&#xff0c;其紧凑而纤薄的设计为以往加固型平板带来了全新的轻薄概念。尽管设计时尚、轻薄&#xff0c;但经过军用认证的强固性仍然能够承受所有具有挑战性的环境条件。随身携带无负担的轻便性加上抗震功能使其成为餐厅、酒店…

Spring Initializer环境问题

1.基于jdk8与本地 环境准备 1)下载jdk8并安装 2&#xff09;下载maven 3.6.3并解压放入D盘maven目录下&#xff0c;去掉外层 设置阿里源 打开settings.xml,在mirrors标签之内增加&#xff0c;注意粘贴后</id>中的/有可能被删掉&#xff0c;要自己补上 <mirror>&l…

敏捷开发模型:一种灵活、协作和持续的软件开发方法

敏捷开发模型&#xff1a;一种灵活、协作和持续的软件开发方法 引言 在软件开发领域&#xff0c;随着市场需求的不断变化和技术的迅速发展&#xff0c;传统的瀑布模型逐渐暴露出其局限性。为了应对这些挑战&#xff0c;敏捷开发模型应运而生。敏捷开发模型强调灵活、协作和持…

Java基于springboot的厨艺交流平台的设计与实现代码

摘 要 使用旧方法对厨艺交流信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在厨艺交流信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。 这次开发的厨艺交流平台功…

华为HCIP Datacom H12-821 卷4

1.单选题 下面哪些策略或工具不能够应用于 OSPF: A、access-list B、prefix-list C、route- Policy D、as-path filter 正确答案&#xff1a; D 解析&#xff1a; as-path-filter命令用来创建AS路径过滤器&#xff0c;OSPF属于IGP协议&#xff0c;不涉及到AS号。 2.单选题…

AI时代,我们需要什么能力?

AI 时代&#xff0c;一定会重构很多行业&#xff0c;也会重构人民的生活工作方式&#xff0c;那么 AI 时代&#xff0c;我们需要培养什么能力呢&#xff1f; 我们应该去做那些 AI 做不了的事情&#xff01;让 AI 成为我们的工具&#xff0c;助力我们更高效的解决问题&#xff…

信息系统项目管理师--项目管理概述

开展项⽬是为了通过可交付成果达成⽬标。⽬标是所指向的结果、要取得的战略地位、要达到的⽬的、要获得的成果、要⽣产的产品或者要提供的服务。 可交付成果形成的独特并可验证的产品、成果或服务。可交付成果可能是有形的&#xff0c;也可能是⽆形的。产⽣⼀个或多个可交付成…

openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划

文章目录 openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划 openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划 完成资源负载管理功能配置前&#xff0c;需要先根据业务模型完成租户资源的规划。业…

矩阵爆破逆向之条件断点的妙用

不知道你是否使用过IDA的条件断点呢&#xff1f;在IDA进阶使用中&#xff0c;它的很多功能都有大作用&#xff0c;比如&#xff1a;ida-trace来跟踪调用流程。同时IDA的断点功能也十分强大&#xff0c;配合IDA-python的输出语句能够大杀特杀&#xff01; 那么本文就介绍一下这…