el-table 多表头+跨行跨列案例

效果:

代码:

index.vue

<template><div class="my-table"><el-tablev-loading="table.loading":data="table.data"bordersize="mini":header-cell-style="headerCellStyle":span-method="spanMethod"><!-- 使用递归组件渲染表头 --><myColumnv-for="(item, index) in table.header":key="index":header="item"/></el-table></div>
</template><script>
// 引入组件
import myColumn from "./my-column.vue";export default {name: "Test1",components: { myColumn },data() {return {table: {loading: false,header: [],data: [],},};},computed: {},created() {},mounted() {// 表头this.table.header = [{prop: "date",label: "月份",width: "100px",children: [],fixed: false,},{prop: "project1",label: "",width: "100px",children: [],},{prop: "project2",label: "项目",width: "100px",position: "111",children: [],},{prop: "index",label: "序号",width: "50px",children: [],},{prop: "deliveryInfo",label: "线下合计",width: "560px",children: [{prop: "name",label: "2024",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "2023",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "增长",width: "80px",children: [{prop: "name1",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},],},{prop: "deliveryInfo",label: "东北",width: "560px",children: [{prop: "name",label: "2024",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "2023",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "增长",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},],},];// 数据this.table.data = [{date: "2016-05-03",project1: "数量",project2: "鞋",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",index: 0,name1: 10086,},{date: "2016-05-02",project1: "数量",project2: "包服配",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",index: 1,},{date: "2016-05-04",name: "王小虎",project1: "收入",project2: "实数收入",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",project1: "收入",project2: "无税收入",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-08",name: "王小虎",project1: "收入",project2: "有税收入",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-06",name: "王小虎",project1: "附加税金",project2: "附加税金",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-07",name: "王小虎",project1: "附加税金1",project2: "附加税金2",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},];},methods: {spanMethod({ row, column, rowIndex, columnIndex }) {// const rowData = Object.values(row);// if ((rowData[1] === rowData[2])) { // 根据实际需求变更if ((row['project1'] === row['project2'])) { // 根据实际需求变更// 跨列数据相同合并if (columnIndex === 1) {return [1, 2];} else if (columnIndex === 2) {return [0, 0]}} else {if (columnIndex === 1) {// 列数据相同合并const currentValue = row[column.property];const preRow = this.table.data[rowIndex - 1];const preValue = preRow ? preRow[column.property] : null;if (currentValue === preValue) {return [0, 0]} else {let rowspan = 1;for (let i = rowIndex + 1; i < this.table.data.length; i++) {const nextRow = this.table.data[i]const nextValue = nextRow[column.property]if (nextValue === currentValue) {rowspan++;} else {break;}}return [rowspan, 1];}}}},headerCellStyle({ row, column, rowIndex, columnIndex }) {let base = { "background": "#4389f94d",color: "#333" };if (column.label === "") {// 隐藏return { display: "none" };}if (column.property === "project2") { // 根据实际需求变更this.$nextTick(() => {if (document.getElementsByClassName(column.id).length !== 0) {document.getElementsByClassName(column.id)[0].setAttribute("colSpan", 2); // 根据实际需求变更}});}return base;},},
};
</script><style lang="scss" scoped></style>

my-column.vue

<template><el-table-column:prop="header.prop":label="header.label":fixed="header.fixed":min-width="header.width"align="center"show-overflow-tooltip><template v-if="header.children && header.children.length"><myColumn v-for="(child, index) in header.children" :key="index" :header="child" /></template></el-table-column>
</template><script>
export default {name: "myColumn",components: {},props: {header: {type: Object,required: true,},},data() {return {};},mounted() {},methods: {},
};
</script><style lang="scss" scoped></style>

附加:index.html模版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>demo</title><!-- 引入样式 --><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/><!-- 引入组件库 --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body><div id="app"><div class="my-table"><el-tablev-loading="table.loading":data="table.data"bordersize="mini":header-cell-style="headerCellStyle":span-method="spanMethod"><!-- 使用递归组件渲染表头 --><mycolumnv-for="(item, index) in table.header":key="index":header="item"/></el-table></div></div><script type="text/javascript">//定义组件Vue.component("mycolumn", {props: {header: {type: Object,required: true,},},template: `<el-table-column :prop="header.prop" :label="header.label" :fixed="header.fixed" :min-width="header.width" align="center" show-overflow-tooltip><template v-if="header.children && header.children.length"><mycolumn v-for="(child, index) in header.children" :key="index" :header="child" /></template></el-table-column>`,});var vm = new Vue({el: "#app",data() {return {table: {loading: false,header: [],data: [],},};},mounted() {// 表头this.table.header = [{prop: "date",label: "月份",width: "100px",children: [],fixed: false,},{prop: "project1",label: "",width: "100px",children: [],},{prop: "project2",label: "项目",width: "100px",position: "111",children: [],},{prop: "index",label: "序号",width: "50px",children: [],},{prop: "deliveryInfo",label: "线下合计",width: "560px",children: [{prop: "name",label: "2024",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "2023",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "增长",width: "80px",children: [{prop: "name1",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},],},{prop: "deliveryInfo",label: "东北",width: "560px",children: [{prop: "name",label: "2024",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "2023",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},{prop: "name",label: "增长",width: "80px",children: [{prop: "name",label: "金额",width: "80px",},{prop: "name",label: "%",width: "80px",children: [],},],},],},];// 数据this.table.data = [{date: "2016-05-03",project1: "数量",project2: "鞋",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",index: 0,name1: 10086,},{date: "2016-05-02",project1: "数量",project2: "包服配",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",index: 1,},{date: "2016-05-04",name: "王小虎",project1: "数量",project2: "实数收入",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",project1: "收入",project2: "无税收入",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-08",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-06",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-07",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},];},methods: {spanMethod({ row, column, rowIndex, columnIndex }) {// const rowData = Object.values(row);// if ((rowData[1] === rowData[2])) { // 根据实际需求变更if (row["project1"] === row["project2"]) {// 根据实际需求变更// 跨列数据相同合并if (columnIndex === 1) {return [1, 2];} else if (columnIndex === 2) {return [0, 0];}} else {if (columnIndex === 1) {// 列数据相同合并const currentValue = row[column.property];const preRow = this.table.data[rowIndex - 1];const preValue = preRow ? preRow[column.property] : null;if (currentValue === preValue) {return [0, 0];} else {let rowspan = 1;for (let i = rowIndex + 1; i < this.table.data.length; i++) {const nextRow = this.table.data[i];const nextValue = nextRow[column.property];if (nextValue === currentValue) {rowspan++;} else {break;}}return [rowspan, 1];}}}},headerCellStyle({ row, column, rowIndex, columnIndex }) {let base = { background: "#4389f94d", color: "#333" };if (column.label === "") {// 隐藏return { display: "none" };}if (column.property === "project2") {// 根据实际需求变更this.$nextTick(() => {if (document.getElementsByClassName(column.id).length !== 0) {document.getElementsByClassName(column.id)[0].setAttribute("colSpan", 2); // 根据实际需求变更}});}return base;},},});</script></body>
</html>

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

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

相关文章

华为FreeBuds Pro 4丢了如何找回?(附查找功能使用方法)

华为FreeBuds Pro 4查找到底怎么用&#xff1f;华为FreeBuds Pro 4有星闪精确查找和离线查找&#xff0c;离线查找功能涵盖播放铃声、导航定位、星闪精确查找、上线通知、丢失模式、遗落提醒等。星闪精确查找是离线查找的子功能&#xff0c;当前仅华为FreeBuds Pro 4充电盒支持…

游戏引擎学习第43天

仓库 https://gitee.com/mrxiao_com/2d_game 介绍运动方程 今天我们将更进一步&#xff0c;探索运动方程&#xff0c;了解真实世界中的物理&#xff0c;并调整它们&#xff0c;以创建一种让玩家感觉愉悦的控制体验。这并不是在做一个完美的物理模拟&#xff0c;而是找到最有趣…

jenkins 出现 Jenkins: 403 No valid crumb was included in the request

文章目录 前言解决方式:1.跨站请求为找保护勾选"代理兼容"2.全局变量或者节点上添加环境变量3.&#xff08;可选&#xff09;下载插件 the strict Crumb Issuer plugin4.重启 前言 jenkins运行时间长了&#xff0c;经常出现点了好几次才能构建&#xff0c;然后报了Je…

SpringAI人工智能开发框架001---SpringAI框架介绍_支持文本到图像_音频到文本_聊天模型_嵌入模型_项目搭建

可以看到官网 SpringAi可以用来对接很多大模型,当然 SpringAI不支持国内大模型,但是SpringAI Alibaba可以,后面会写一个如何使用 SpringAI Alibaba的文章,很简单. 可以看到官网的介绍. 可以看到SpringAI 支持的模型. 有很多国外的.

【实验】【H3CNE邓方鸣】交换机端口安全实验+2024.12.11

实验来源&#xff1a;邓方鸣交换机端口安全实验 软件下载&#xff1a; 华三虚拟实验室: 华三虚拟实验室下载 wireshark&#xff1a;wireshark SecureCRT v8.7 版本: CRT下载分享与破解 文章目录 dot1x 开启802.1X身份验证 开启802.1X身份验证&#xff0c;需要在系统视图和接口视…

Web页面的请求历程

文章目录 1 因特网协议栈2 Web页面的请求历程 1 因特网协议栈 协议栈常用协议应用层HTTP协议、DNS协议、DHCP协议传输层TCP协议、UDP协议网络层IP协议、NAT协议、ICMP协议、BGP协议、OSPF协议数据链路层ARP协议、以太网协议物理层各种电气特性的规定等 2 Web页面的请求历程 …

Redis - 消息队列 Stream

一、概述 消息队列 定义 消息队列模型&#xff1a;一种分布式系统中的消息传递方案&#xff0c;由消息队列、生产者和消费者组成消息队列&#xff1a;负责存储和管理消息的中间件&#xff0c;也称为消息代理&#xff08;Message Broker&#xff09;生产者&#xff1a;负责 产…

从构想到实现:EasyOne 多模态 AI 产品开发历程

在人工智能技术飞速发展的今天&#xff0c;智能产品和服务已经从单一的应用向多模态智能系统进化。随着大语言模型、计算机视觉、语音识别等领域的突破&#xff0c;开发集成多种 AI 技术的平台变得日益重要。为此&#xff0c;我们开发了 EasyOne&#xff0c;一个全新的 AI 多模…

【深度学习总结】使用PDF构建RAG:结合Langchain和通义千问

【深度学习总结】使用PDF构建RAG&#xff1a;结合Langchain和通义千问 使用平台&#xff1a;趋动云&#xff0c;注册送算力 前言 在大型语言模型&#xff08;LLMs&#xff09;应用领域&#xff0c;我们面临着大量挑战&#xff0c;从特定领域知识的匮乏到信息准确性的窘境&am…

ubuntu监测硬盘状态

安装smartmontools smartctl -l error /dev/sdk smartctl -i /dev/sda lshw -class disk smartctl -H /dev/sd 结果1&#xff1a; 结果2&#xff1a;PASSED&#xff0c;这表示硬盘健康状态良好 smartctl -a /dev/sdb sdk lsblk blkid 测试写入速度 time dd if/dev/zero of…

易语言OCR证件照文字识别

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…

【智体OS】官方上新发布智体机器人:使用rtrobot智体应用远程控制平衡车机器人

【智体OS】官方上新发布智体机器人&#xff1a;使用rtrobot智体应用远程控制平衡车机器人 dtns.network是一款主要由JavaScript编写的智体世界引擎&#xff08;内嵌了three.js编辑器的定制版-支持以第一视角浏览3D场馆&#xff09;&#xff0c;可以在浏览器和node.js、deno、e…

Three使用WebGPU的关键TSL

Three.js 使用 WebGPU 的关键 TSL TSL: three.js shader language 介绍 three.js 材质转为webgpu的关键流程, 从而引出 TSL. 1、关键类关系 WebGPURenderer|-- library: StandardNodeLibrary|-- _nodes: Nodes|-- _objects: RenderObjects|-- createRenderObject()StandardN…

东方通TongWeb7.0.4.9M4部署SuperMap iServer 11.2.1

一、软件版本 操作系统: CentOS Linux release 7.5.1804 (Core)JDK:11.0.18东方通&#xff1a;TongWeb7.0.4.9M4SuperMap iServer&#xff1a;11.2.1 JDK和TongWeb软件分享&#xff1a; 链接: https://pan.baidu.com/s/1HGDTPnPID0PEOMbg3FjTVQ?pwdbh8v 提取码: bh8v 东方通软…

医学预测模型的网页应用必要模块设计(重制版)

医学预测模型的网页应用必要模块设计&#xff08;重制版&#xff09; 刘岳鹏 摘要&#xff1a; 网页应用&#xff08;Web APP&#xff09;承载医学临床预测模型并在临床实践中实现与用户的互动&#xff0c;必要的功能模块设计将有助于Web APP更好地在临床实践中发挥其功能。在此…

【C++】反向输出一个四位数的深入探讨

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;问题描述&#x1f4af;我的实现方案代码实现核心思路解析示例执行过程 &#x1f4af;老师的实现方案代码实现代码特点与分析执行流程示例代码对比与深入分析 &#x1f4af;…

Android中坐标体系知识超详细讲解

说来说去都不如画图示意简单易懂啊&#xff01;&#xff01;&#xff01;真是的&#xff01; 来吧先上张图&#xff01; &#xff08;一&#xff09;首先明确一下android 中的坐标系统&#xff1a; 屏幕的左上角是坐标系统原点&#xff08;0,0&#xff09; 原点向右延伸是X轴正…

泷羽sec学习打卡-brupsuite7搭建IP炮台

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于brupsuite的那些事儿-Brup-IP炮台搭建 搭建炮台服务端安装zmap1、更新系统和安装基础依赖&#xff…

【视频异常检测】Real-Time Anomaly Detection and Localization in Crowded Scenes 论文阅读

文章信息&#xff1a; 发表于&#xff1a;CVPR2015&#xff08;workshop&#xff09; 原文链接&#xff1a;https://www.cv-foundation.org/openaccess/content_cvpr_workshops_2015/W04/papers/Sabokrou_Real-Time_Anomaly_Detection_2015_CVPR_paper.pdf Real-Time Anomaly D…

Hive-4.0.1数据库搭建(可选配置用户名密码远程连接,涵盖切换为tez引擎)

一、hive搭建&#xff08;所依赖的Hadoop集群参照文章&#xff1a;最新版hadoop-3.4.0集群安装和配置&#xff08;目前论坛的都是老古董了&#xff0c;看我的准没错&#xff01;&#xff01;&#xff01;&#xff09;这里以三台服务器为例_hadoop 3.4安装-CSDN博客&#xff09;…