el-table相同的值合并单元格+多级表头

<el-table border :data="costList" :span-method="objectSpanMethod" ><el-table-column label="类别" prop="类别" width="120"> </el-table-column><el-table-column label="费用科目" prop="费用科目" width="120"> </el-table-column><el-table-column v-for="(item, index) in costTitle" :key="index" :label="item.name" width="120" :prop="item"><el-table-column :label="item.amount" width="120"><el-table-column v-for="(val, ind) in item.data" :key="ind" :label="val.substr(val.length - 2)" :prop="val"width="120"></el-table-column></el-table-column></el-table-column></el-table>export default {name: "OaZyfy",data() {return {costList: [],//内容costTitle: [],//表头mergeObj:{},mergeArr:['类别']//需要合并的表头 我这key值为中文 }methods: {getList() {
this.costList=[{"类别":"办公费","费用科目":"行政办公_快件费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":111,"船代(曹妃甸)总计":888,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":222},{"类别":"办公费","费用科目":"行政办公_通讯费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":500,"船代(曹妃甸)总计":888,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":222,"船代(京唐港)总计":222},{"类别":"办公费","费用科目":"行政办公_网络服务费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":888,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":222},{"类别":"办公费","费用科目":"行政办公_消耗品费用_办公用品","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":888,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":222},{"类别":"办公费","费用科目":"行政办公费-市内交通费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":888,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":222},{"类别":"办公费","费用科目":"workSum","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":888,"船代(曹妃甸)总计":888,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":222,"船代(京唐港)总计":222},{"类别":"招待费","费用科目":"招待费_饭费","最小组织":"睿智","睿智总计":33,"睿智明细":0,"船代(曹妃甸)明细":3,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"招待费_酒水","最小组织":"睿智","睿智总计":33,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"招待费_购卡","最小组织":"睿智","睿智总计":33,"睿智明细":4000,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"招待费_礼金","最小组织":"睿智","睿智总计":33,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"招待费_礼品","最小组织":"睿智","睿智总计":33,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"招待费_烟","最小组织":"睿智","睿智总计":33,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"招待费_住宿","最小组织":"睿智","睿智总计":33,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"招待费_其他","最小组织":"睿智","睿智总计":33,"睿智明细":2,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"招待费","费用科目":"serveSum","最小组织":"睿智","睿智总计":33,"睿智明细":33,"船代(曹妃甸)明细":3,"船代(曹妃甸)总计":3,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"差旅费","费用科目":"交通费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":0,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"差旅费","费用科目":"过桥费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":0,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"差旅费","费用科目":"餐饮费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":0,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"差旅费","费用科目":"住宿费","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":0,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},{"类别":"差旅费","费用科目":"tripSum","最小组织":"睿智","睿智总计":0,"睿智明细":0,"船代(曹妃甸)明细":0,"船代(曹妃甸)总计":0,"船代(沧州)明细":0,"船代(沧州)总计":0,"船代(京唐港)明细":0,"船代(京唐港)总计":0},]this.costTitle=  [{"name":"睿智","amount":"123.0","data":["睿智总计","睿智明细"]},{"name":"船代(曹妃甸)","amount":"456.21","data":["船代(曹妃甸)总计","船代(曹妃甸)明细"]},{"name":"船代(沧州)","amount":"450.0","data":["船代(沧州)总计","船代(沧州)明细"]},{"name":"船代(京唐港)","amount":"789.96","data":["船代(京唐港)总计","船代(京唐港)明细"]}]this.getSpanArr(this.costList)// listCost(this.queryParams).then(response => {//  this.costList = response.data.data1;// this.costTitle = response.data.title1;//this.loading = false;// 需要合并的表头// this.costTitle.forEach(item=>{// this.mergeArr.push(...item.data)// this.mergeArr.push(item.data[0])//})// console.log(this.mergeArr)//});},
getSpanArr(data) {this.mergeArr.forEach((key, index1) => {let count = 0; // 用来记录需要合并行的起始位置this.mergeObj[key] = []; // 记录每一列的合并信息data.forEach((item, index) => {// index == 0表示数据为第一行,直接 push 一个 1if(index === 0) {this.mergeObj[key].push(1); } else {// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位if(item[key] === data[index - 1][key]) { this.mergeObj[key][count] += 1;this.mergeObj[key].push(0);} else {// 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1}}})})console.log(this.mergeObj)// 相同的值合并完成
},// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 判断列的属性if(this.mergeArr.indexOf(column.property) !== -1) { // 判断其值是不是为0 if(this.mergeObj[column.property][rowIndex]) { return [this.mergeObj[column.property][rowIndex], 1]} else {// 如果为0则为需要合并的行return [0, 0]; }}
},
}}}

效果图
在这里插入图片描述
解决右下角合并贯穿问题

getSpanArr(data) {this.mergeArr.forEach((key, index1) => {let count = 0; // 用来记录需要合并行的起始位置this.mergeObj[key] = []; // 记录每一列的合并信息data.forEach((item, index) => {// index == 0表示数据为第一行,直接 push 一个 1if(index === 0) {this.mergeObj[key].push(1); } else {// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位if(item[key] === data[index - 1][key]) { this.mergeObj[key][count] += 1;this.mergeObj[key].push(0);} else {// 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1}}})})console.log(this.mergeObj)// 相同的值合并完成// 循环对象让后面合并的列与第一列齐平Object.keys(this.mergeObj).forEach(key => {this.mergeObj[key]=this.mergeObj['类别']})console.log(this.mergeObj)},

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

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

相关文章

golang 反射机制

在 go 语言中&#xff0c;实现反射能力的是 reflect包&#xff0c;能够让程序操作不同类型的对象。其中&#xff0c;在反射包中有两个非常重要的 类型和 函数&#xff0c;两个函数分别是&#xff1a; reflect.TypeOfreflect.ValueOf 两个类型是 reflect.Type 和 reflect.Value…

电脑技巧:笔记本电脑网络不显示wifi列表解决办法

目录 1.WiFi功能被关闭 2.启用了飞行模式 3.WLAN连接被禁用 4.无线网卡驱动未安装 5.WLAN AutoConfig服务未启动 我的笔记本电脑连接wifi时&#xff0c;结果wifi列表中不显示任何的网络信息&#xff0c;这是怎么回事&#xff1f;要如何解决&#xff1f; 答&#xff1a;笔…

分享5款小众且无广告的软件,走过路过别错过

你是否喜欢一些小众且无广告的软件&#xff1f;如果是的话&#xff0c;那可不要错过今天我给你们推荐的这5款软件。 1.剪贴板——ClipX ​ ClipX是一款简单实用的剪贴板程序&#xff0c;可以捕获复制到Windows剪贴板的文本和图像&#xff0c;并允许用户访问复制项的历史记录。…

ArmSoM-W3之RK3588硬编解码MPP环境配置

1. 简介 瑞芯微提供的媒体处理软件平台&#xff08;Media Process Platform&#xff0c;简称 MPP&#xff09;是适用于瑞芯微芯片系列的 通用媒体处理软件平台。该平台对应用软件屏蔽了芯片相关的复杂底层处理&#xff0c;其目的是为了屏蔽不 同芯片的差异&#xff0c;为使用者…

Kafka快速入门(最新版3.6.0)

文章目录 一、初识MQ1.1 什么是MQ1.2 同步和异步通讯1.1.1 同步通讯1.1.2 异步通讯 1.3 技术对比1.4 MQ的两种模式 二、初识Kafka2.1 Kafka的使用场景2.2 Kafka基本概念2.3 Topic与Partition 三、Kafka基本使用3.1 部署前的准备3.2 启动kafka服务器3.3 Kafka核心概念之Topic3.4…

“中国版Zara”拉夏贝尔:从辉煌到破产清算

文/ 大力财经 拉夏贝尔的破产清算&#xff0c;让人不禁惋惜。这个曾经被誉为“中国版Zara”的女装品牌&#xff0c;在全国拥有超过2000家门店&#xff0c;一度是年轻人的追捧对象。 然而&#xff0c;由于市场竞争激烈、品牌定位模糊、库存积压严重等问题&#xff0c;拉夏贝尔…

“微信小程序登录与用户信息获取详解“

目录 引言微信小程序微信登录介绍1. 微信登录的基本概念2. 微信小程序中的微信登录 微信小程序登录的wxLogin与getUserProfile的区别1. wx.login()2. wx.getUserProfile()3.两者区别 微信小程序登录的理论概念1. 微信登录流程2. 用户授权与登录态维护 微信小程序登录的代码演示…

由Django-Session配置引发的反序列化安全问题

漏洞成因 漏洞成因位于目标配置文件settings.py下 关于这两个配置项 SESSION_ENGINE&#xff1a; 在Django中&#xff0c;SESSION_ENGINE 是一个设置项&#xff0c;用于指定用于存储和处理会话&#xff08;session&#xff09;数据的引擎。 SESSION_ENGINE 设置项允许您选择不…

buuctf[极客大挑战 2019]Havefun 1

网页环境title标题每一帧都不要放过&#xff0c;或许那个不起眼的地方就存在重要信息到这并未发现什么重要信息&#xff0c;F12看看在源代码底部发现PHP代码&#xff1a; <!-- $cat$_GET[cat]; echo $cat; if($catdog){ echo Syc{cat_cat_cat_cat}; } --> PHP代码…

账号合租平台源码Thinkphp6.1|内置详细搭建教程

小白账号合租平台说明 系统采用的是常见的租号平台模式,现在网络上流出的这种类型的源码还很少 平台介绍 1.租号模式,用户可自行选择单独租号或采用合租的模式。 2.支付,采用易支付通用接口 3.邀请返利,为了站长能更好推广推荐了邀请返利功能 4.用户提现功能 5.工单…

【QT开发(11)】QT 线程QThread

Qt的线程支持与平台无关的&#xff1a; 线程类、一个线程安全的发送事件方式跨线程的信号-槽的关联 这使得可以从分利用多处理器机器&#xff0c;有效解决不冻结一份应用程序用户界面的情况下&#xff0c;处理一个耗时操作的问题。 文章目录 1、QThread 一个与平台无关的线程…

19、zynq核引出外部引脚

自动连接所有管脚后&#xff0c;没法通过make external来引出ps端的引脚&#xff0c;此时可以右击管脚&#xff0c;选择create port来引出。