elementbi表格的列合并，注意这是列合并不是行合并

先准备列合并代码

//先准备列合并代码
export function rowMergeHandle(arr, data) {if (!Array.isArray(arr) && !arr.length) return false;if (!Array.isArray(data) && !data.length) return false;let needMerge = {};arr.forEach((i, idx) => {needMerge[i] = {rowArr: [],rowMergeNum: 0,};if (idx == 0) {data.forEach((item, index) => {// 表格首个数据单独处理if (index === 0) {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = 0;} else {if (item[i] === data[index - 1][i]) {needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;needMerge[i].rowArr.push(0);} else {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = index;}}});} else {let firstRowArr = needMerge[arr[0]].rowArr;let firstRowArrDeal = [];firstRowArr.forEach((item, index) => {if (item > 0) {firstRowArrDeal.push(index);}});data.forEach((item, index) => {let sign = false;if (firstRowArrDeal.indexOf(index) > 0) {needMerge[i].rowMergeNum = index;sign = true;}// 表格首个数据单独处理if (index === 0) {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = 0;} else {if (item[i] === data[index - 1][i]) {if (sign) {needMerge[i].rowArr.push(1);} else {needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;needMerge[i].rowArr.push(0);}} else {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = index;}}});}});return needMerge;
}
  • 引入列合并代码 import { rowMergeHandle } from “…/…/utile/tool”;
  • 在准备两个容器，一个放需要合并的字段，一个方空数组：
    • needMergeArr: [“title”,“formId”,“问卷操作”], //这里面放需要合并的字段
    • rowMergeArrs: [], //这里是空数组
/***
needMergeArr  就是上边定义的需要合并的字段数组
rowMergeArrs  就是上班定义的空数组
*/
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {for (let res in needMergeArr) {if (needMergeArr[res] == column.property) {return mergeAction(column.property, rowIndex, columnIndex);}}}
const mergeAction = (val, rowIndex) => {let _row = .rowMergeArrs[val].rowArr[rowIndex];let _col = _row > 0 ? 1 : 0;return [_row, _col];
}

完整的代码例子

// 列合并函数
export function rowMergeHandle(arr, data) {if (!Array.isArray(arr) && !arr.length) return false;if (!Array.isArray(data) && !data.length) return false;let needMerge = {};arr.forEach((i, idx) => {needMerge[i] = {rowArr: [],rowMergeNum: 0,};if (idx == 0) {data.forEach((item, index) => {// 表格首个数据单独处理if (index === 0) {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = 0;} else {if (item[i] === data[index - 1][i]) {needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;needMerge[i].rowArr.push(0);} else {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = index;}}});} else {let firstRowArr = needMerge[arr[0]].rowArr;let firstRowArrDeal = [];firstRowArr.forEach((item, index) => {if (item > 0) {firstRowArrDeal.push(index);}});data.forEach((item, index) => {let sign = false;if (firstRowArrDeal.indexOf(index) > 0) {needMerge[i].rowMergeNum = index;sign = true;}// 表格首个数据单独处理if (index === 0) {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = 0;} else {if (item[i] === data[index - 1][i]) {if (sign) {needMerge[i].rowArr.push(1);} else {needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;needMerge[i].rowArr.push(0);}} else {needMerge[i].rowArr.push(1);needMerge[i].rowMergeNum = index;}}});}});return needMerge;
}//上边是列合并函数
<template><div class="home"><el-container class="page-main"><el-main class="main-table_container"><div :style="{height: queryParams.toolQuery.queryParamsShow? 'calc(100% - 200px)': 'calc(100% - 180px)',}"><el-table :data="queryParams.tableConfig.tableData.all" @selection-change="Home_SelectionChange":element-loading-text="queryParams.loadingTxt" v-loading="queryParams.loading.table" highlight-current-rowsize="small" height="calc(100vh - 120px)" ref="tableData" id="exportTab" borderheader-cell-class-name="my-header-cellTwo" :span-method="objectSpanMethod"><el-table-column align="center" type="selection" width="55" /><!-- <el-table-column type="index" width="50" fixed> </el-table-column> --><template v-for="(column, index) in queryParams.tableConfig.tableColumn.filter((item) => item.show)"><el-table-column v-if="column.field === 'jobtime'" :prop="column.field" :label="column.label":min-width="column.width" :sortable="column.sortable ? true : false"><template #default="scope"><span>{{ dateFormat(scope.row.jobtime) }} </span></template></el-table-column><el-table-column v-else-if="column.field === 'sfid'" :prop="column.field" :label="column.label":min-width="column.width" :sortable="column.sortable ? true : false"><template #default="scope"><span>{{ scope.row.sfid }} </span></template></el-table-column><el-table-column v-else :label="column.label" :fixed="column.fixed" :min-width="column.width":prop="column.field" :sortable="column.sortable ? true : false"></el-table-column></template><el-table-column fixed="right" align="center" label="问题操作" width="100"><template #default="scope"><el-button link type="primary" size="small" @click="FN_Sealp(scope.row, 'edit')">编辑</el-button><el-button link type="danger" size="small" @click="FN_Sealp(scope.row, 'del')">删除</el-button></template></el-table-column><el-table-column fixed="right" align="center" label="问卷操作" prop="问卷操作" width="100"><template #default="scope"><el-button link type="primary" size="small" @click="FN_Sealp(scope.row, 'edit')">编辑</el-button><el-button link type="danger" size="small" @click="FN_Sealp(scope.row, 'del')">删除</el-button></template></el-table-column></el-table></div></el-main></el-container></div></template><script setup>import { ref, onMounted, nextTick, defineComponent, createVNode } from "vue";import {GetQuestionList,} from "../../api/OnlineConsultation/index";import {rowMergeHandle} from "../../utile/tool";const tableData = ref(null);const fullscreenLoading = ref(false);let queryParams = ref({action: false,Cookie_USER: null,loadingTxt: "",loading: {table: false,},tableConfig: {tableData: {all: [],},tableColumn: [{field: "title",show: true,width: "",label: "问卷标题",sortable: false,},{field: "formId",show: true,width: "",label: "问卷编号",sortable: false,},{field: "questionText",show: true,width: "",label: "问题",sortable: false,},{field: "createDate",show: true,width: "",label: "创建时间",sortable: false,},],},pageConfig: {//每页行数F_IsCutOfflimit: 50,// 当前页page: 1,//总记录数count: 0,},needMergeArr: ["title", "formId", "问卷操作"], //需要合并的字段rowMergeArrs: [],})// 列表初始化const getPageList = () => {let obj = {name: queryParams.value.toolQuery.queryParams.openarea, //发放地page: queryParams.value.pageConfig.page,limit: queryParams.value.pageConfig.limit,};queryParams.value.loading.table = true;queryParams.value.loadingTxt = "加载中。。。";window.setTimeout(() => {queryParams.value.tableConfig.tableData.all = [];GetQuestionList(obj).then((res) => {if (res.code !== 200) {ElNotification({title: "失败",message: res.msg,type: "error",});return;}queryParams.value.loading.table = false;queryParams.value.loadingTxt = "";queryParams.value.tableConfig.tableData.all = res.data.list;queryParams.value.pageConfig.count = res.data.count;queryParams.value.rowMergeArrs = rowMergeHandle(queryParams.value.needMergeArr, res.data.list)nextTick(() => {if (tableData.value && tableData.value.doLayout) {tableData.value.doLayout();}});});}, 300);};const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {for (let res in queryParams.value.needMergeArr) {if (queryParams.value.needMergeArr[res] == column.property) {return mergeAction(column.property, rowIndex, columnIndex);}}}const mergeAction = (val, rowIndex) => {let _row = queryParams.value.rowMergeArrs[val].rowArr[rowIndex];let _col = _row > 0 ? 1 : 0;return [_row, _col];}onMounted(() => {});</script><style>.my-header-cellTwo {font-weight: bold !important;background: #f2f6fc !important;color: #303133;}.el-table__body tr:hover>td {background-color: #ffc0cb !important;}</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Qt6入门教程 8：信号和槽机制（连接方式）

Qt6入门教程 8：信号和槽机制（连接方式）

目录 一.一个信号与槽连接的例子 二.第五个参数 1.Qt::AutoConnection 2.Qt::DirectConnection 3.Qt::QueuedConnection 4.Qt::BlockingQueuedConnection 5.Qt::UniqueConnection 三.信号 四.connect函数原型 五.信号与槽的多种用法 六.槽的属性 一.一个信号与槽连接…
阅读更多...
R语言【cli】——builtin_theme()：内置的CLI主题

R语言【cli】——builtin_theme()：内置的CLI主题

Package cli version 3.6.0 Description 此主题始终处于活动状态&#xff0c;并且位于主题堆栈的底部。 Usage builtin_theme(dark getOption("cli.theme_dark", "auto")) Argument 参数【dark】&#xff1a;是否使用黑暗主题。cli.theme_dark选项可用…
阅读更多...
AIGC时代高效阅读论文实操

AIGC时代高效阅读论文实操

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…
阅读更多...
3d渲染软件有哪些？3d云渲染推荐

3d渲染软件有哪些？3d云渲染推荐

目前市面上的3D渲染软件非常多&#xff0c;不同的建模软件都有自己的渲染方式&#xff0c;根据所处行业的不同和项目需要&#xff0c;设计师可以选择不同的软件帮助展示最终效果。 主流的渲染软件有&#xff1a;VRay和Corona&#xff1a;一般用于室内效果图渲染&#xff0c;与3…
阅读更多...
go 语言爬虫库goquery介绍

go 语言爬虫库goquery介绍

文章目录 爬虫介绍goquery介绍利用NewDocumentFromReader方法获取主页信息Document介绍通过查询获取文章信息css选择器介绍goquery中的选择器获取主页中的文章链接 爬取总结 爬虫介绍 爬虫&#xff0c;又称网页抓取、网络蜘蛛或网络爬虫&#xff0c;是一种自动浏览互联网并从网…
阅读更多...
chapter10-让你拥有“火眼金睛”的 Fiddr4 和其他工具

chapter10-让你拥有“火眼金睛”的 Fiddr4 和其他工具

在前面的课程中&#xff0c;我们通过一个简单的天气预报服务&#xff0c;拓展了如何使用邮件、短信&#xff0c;以及部署在服务器上&#xff0c;完整的开发了一款可以正式使用的小程序。但是有的同学可能也会产生抱怨&#xff1a;这门课不是是爬虫入门吗&#xff1f;为什么讲的…
阅读更多...
HttpServletRequest HttpEntity StringEntity 区别

HttpServletRequest HttpEntity StringEntity 区别

HttpEntity&#xff1a; 在 Apache HttpClient 中是一个接口&#xff0c;它代表一个可读或可写的HTTP消息实体&#xff0c;包括请求体和响应体。 在发送HTTP请求时&#xff0c;可以附带各种类型的实体内容&#xff0c;而在接收HTTP响应时&#xff0c;则会从服务器获取相应的实…
阅读更多...
如何在Servlet中获取请求参数的值

如何在Servlet中获取请求参数的值

看看这个大佬做的动图吧&#xff01; 在Servlet中&#xff0c;你可以使用HttpServletRequest对象来获取请求参数的值。HttpServletRequest对象提供了一些方法&#xff0c;允许你访问从客户端发送的请求信息。以下是一些获取请求参数的常用方法&#xff1a; getParameter(String…
阅读更多...
node.js项目express的初始化

node.js项目express的初始化

目录 1.初始化项目2.配置跨域3.开始编写API3.1准备3.2路由处理函数router_make下的user.js3.3路由模块router下的user.js3.4入口文件app.js里面去新增这段代码3.5启动项目进行测试 &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01; ⭐️ 收藏&#xff0c;你…
阅读更多...
小程序学习-19

小程序学习-19

Vant Weapp - 轻量、可靠的小程序 UI 组件库 ​​​​​ Vant Weapp - 轻量、可靠的小程序 UI 组件库 安装出现问题&#xff1a;rollbackFailedOptional: verb npm-session 53699a8e64f465b9 解决办法&#xff1a;http://t.csdnimg.cn/rGUbe Vant Weapp - 轻量、可靠的小程序…
阅读更多...
Unity中URP下的SimpleLit片元着色器

Unity中URP下的SimpleLit片元着色器

文章目录 前言一、SimpleLit片元着色器大体框架1、传入 和 返回2、GPU实例化部分3、准备 BlinnPhong 光照模型计算需要的 SurfaceData4、准备 BlinnPhong 光照模型计算需要的 InputData5、进行 BlinnPhong 的计算、雾效颜色混合及透明度计算 二、准备SurfaceData1、SurfaceData…
阅读更多...
基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖微信小程序端(十三)

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖微信小程序端(十三)

地址簿相关功能 1.1 需求分析和设计1.1.1 产品原型1.1.2 接口设计1.1.3 表设计 1.2 代码实现1.2.1 Mapper层1.2.2 Service层1.2.3 Controller层 1.1 需求分析和设计 1.1.1 产品原型 地址簿&#xff0c;指的是消费者用户的地址信息&#xff0c;用户登录成功后可以维护自己的地…
阅读更多...
Salesforce开发者 - 从入门到精深

Salesforce开发者 - 从入门到精深

# 前言 1.1 Salesforce 平台简介 Salesforce 是一种云计算平台&#xff0c;专注于客户关系管理&#xff08;CRM&#xff09;。它提供了一整套工具和服务&#xff0c;用于开发、定制和管理企业应用程序。 1.2 为什么选择 Salesforce 开发 - 快速开发&#xff1a;通过Salesfo…
阅读更多...
51单片机中断

51单片机中断

1、什么是中断&#xff1f; CPU在处理某一事件A时&#xff0c;发生了另一事件B请求CPU迅速去处理&#xff08;中断发生&#xff09;&#xff1b; CPU暂时中断当前的工作&#xff0c;转去处理事件B&#xff08;中断响应和中断服务&#xff09;&#xff1b; 待CPU将事件B处理完…
阅读更多...
【书生·浦语】大模型实战营——第六课笔记

【书生·浦语】大模型实战营——第六课笔记

视频链接&#xff1a;https://www.bilibili.com/video/BV1Gg4y1U7uc/?vd_source5d94ee72ede352cb2dfc19e4694f7622 教程文档&#xff1a;https://github.com/InternLM/tutorial/blob/main/opencompass/opencompass_tutorial.md 仓库&#xff1a;https://github.com/open-compa…
阅读更多...
爬虫-selenium自动化(3)-验证码

爬虫-selenium自动化(3)-验证码

#验证码分很多种&#xff0c;奇葩也无处不在:哪个是真茅台&#xff0c;红绿灯&#xff0c;摩托车......(我是个人都看不出来) (๑﹏๑) #本节内容为selenium自动化实现验证码通过-------字符验证码&#xff0c;点触验证码。 验证码介绍 字符验证码案例 点触验证码案例
阅读更多...
《设计模式的艺术》笔记 - 适配器模式

《设计模式的艺术》笔记 - 适配器模式

介绍 适配器模式将一个接口转换成客户希望的另一个接口&#xff0c;使接口不兼容的那些类可以一起工作&#xff0c;其别名为包装器。 实现 对象适配器模式 myclass.h // // Created by yuwp on 2024/1/12. //#ifndef DESIGNPATTERNS_MYCLASS_H #define DESIGNPATTERNS_MYCL…
阅读更多...
《Python数据分析技术栈》第03章 03 可视化各级数据（Visualizing various levels of data）

《Python数据分析技术栈》第03章 03 可视化各级数据（Visualizing various levels of data）

03 可视化各级数据&#xff08;Visualizing various levels of data&#xff09; 《Python数据分析技术栈》第03章 03 可视化各级数据&#xff08;Visualizing various levels of data&#xff09; Whenever you need to analyze data, first understand if the data is stru…
阅读更多...
二叉树的直径（LeetCode 543）

二叉树的直径（LeetCode 543）

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路参考文献 1.问题描述 给你一棵二叉树的根节点&#xff0c;返回该树的直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的长度由它们之间边数…
阅读更多...
QT上位机开发（Web API联调）

QT上位机开发（Web API联调）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 在工厂里面，一条流水线，或者说一条生产线，常常是由很多家供应商的产品组合在一起，共同完成商品的生产和制造的。这里面有不同供应商的软件，也有集成商的软件，甚至有生产厂家i…
阅读更多...
最新文章

Copyright @ 2022~2023