el-table根据data动态生成列和行

css

//el-table-column加上fixed后会导致悬浮样式丢失,用下面方法可以避免
.el-table__body .el-table__row.hover-row td{background-color: #083a78 !important;
}
.el-table tbody tr:hover>td {background: #171F34 !important;
}

html

   <el-table ref="multipleTable" :data="gridData" :span-method="cellMerge"style="min-width: 1300px; white-space: nowrap" header-cell-class-name="headerCellClassName"row-class-name="rowClassName" cell-class-name="cellClassName"><!--show-summary :summary-method="getSummaries" --><!-- <el-table-column type="index" label="序号"> </el-table-column> --><el-table-column prop="projectName" label="项目" fixed="left"> </el-table-column><el-table-column prop="areaName" label="区域" fixed="left"> </el-table-column><el-table-columnv-for="(item,index) in gridData[0].dayList" ley="index"><template slot="header" slot-scope="scope">{{ item.dayName   }}</template><template slot-scope="scope">{{ gridData[scope.$index].dayList[index].dayDate }}</template></el-table-column><el-table-column prop="heji" label="月份合计" fixed="right"> </el-table-column><el-table-column prop="huanbi" label="月份环比" fixed="right"> </el-table-column><template slot="empty"><div class="empty"><img class="empty_img" src="@/assets/empty.png" /><div>暂无数据</div></div></template></el-table>
JS
 gridData: [{projectName:'用水情况()',areaName:'商铺',heji:'456',huanbi:'10%',dayList: [{dayName: '1',dayDate: '16'},{dayName: '2',dayDate: '197'},{dayName: '3',dayDate: '198'},{dayName: '4',dayDate: '16'},{dayName: '5',dayDate: '197'},],},{projectName: '用水情况()',areaName: '公寓',heji: '456',huanbi: '10%',dayList: [{dayName: '1',dayDate: '186'},{dayName: '2',dayDate: '187'},{dayName: '3',dayDate: '188'},{dayName: '4',dayDate: '16'},{dayName: '5',dayDate: '197'},],},]

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

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

相关文章

1783_CMD启动MATLAB同时执行一个脚本

全部学习汇总&#xff1a; GitHub - GreyZhang/g_matlab: MATLAB once used to be my daily tool. After many years when I go back and read my old learning notes I felt maybe I still need it in the future. So, start this repo to keep some of my old learning notes…

ELK框架Logstash配合Filebeats和kafka使用

ELK框架Logstash配合Filebeats和kafka使用 本文目录 ELK框架Logstash配合Filebeats和kafka使用配置文件结构input为标准输入&#xff0c;output为标准输出input为log文件output为标准输出output为es input为tcpspringboot配置logstash配置 input为filebeatsfilebeats配置logsta…

Matlab论文插图绘制模板第111期—带线标记的图

本期分享的是带线标记注释的图。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;加群的朋友请自行下载。有需要的朋友可以关注同名公号【阿昆的科研日常】&#xff0c;后台回复关键词【绘图桶】查看加入方式。 模板中最…

PV PVC in K8s

摘要 在Kubernetes中&#xff0c;PV&#xff08;Persistent Volume&#xff09;和PVC&#xff08;Persistent Volume Claim&#xff09;是用于管理持久化存储的重要资源对象。PV表示存储的实际资源&#xff0c;而PVC表示对PV的声明性要求。当应用程序需要使用持久化存储时&…

Android 网络配置

adb root adb shell 改变网卡网址 ifconfig eth0 192.168.0.167 up 添加虚拟网卡 ifconfig eth0:0 192.168.10.10 up 以上的命令就可以在eth0网卡上创建一个叫eth0:0的虚拟网卡,他的地址是:192.168.10.10 删除虚拟网卡 ifconfig eth0:0 down ip route 查看路由表的内容 …

【数据结构】如何设计循环队列?图文解析(LeetCode)

LeetCode链接&#xff1a;622. 设计循环队列 - 力扣&#xff08;LeetCode&#xff09; 目录 做题思路 只开辟 k 个空间 多开一个空间 代码实现 1. 循环队列的结构 2. 开辟空间 3. 判断空 4. 判断满 5. 队尾插入数据 6. 队头删除数据 7. 获取队头元素 8. 获取队尾元…

炫酷的开关--20230907

Night && Day Toggle ☀️/&#x1f319; [Completed It!] HTML&#xff1a; <div class"controls"><label for"sync">Sync <body></label><input id"sync" type"checkbox"/> </div> &l…

基于javaweb的网上图书销售系统(servlet+jsp)

系统简介 本项目采用eclipse工具开发&#xff0c;jspservletjquery技术编写&#xff0c;数据库采用的是mysql&#xff0c;navicat开发工具。 角色&#xff1a; 管理员普通用户 模块简介 管理员&#xff1a; 登录用户管理图书分类管理图书管理图书订单管理图书评论管理数据统…

【通俗理解】CNN卷积神经网络 - 附带场景举例

一. CNN 算法概述 CNN的全称是Convolutional Neural Networks, ConvNets&#xff0c;称之为卷积神经网络&#xff0c;是深度学习的经典算法之一。 CNN一般用于图片分类、检索、人脸识别、目标定位等。在常规的图像处理的过程中&#xff0c;存在以下两个问题&#xff1a; 图像…

【2023高教社杯】D题 圈养湖羊的空间利用率 问题分析、数学模型及MATLAB代码

【2023高教社杯】D题 圈养湖羊的空间利用率 问题分析、数学模型及MATLAB代码 1 题目 题目 D 题 圈养湖羊的空间利用率 规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养&#xff0c;适应不同种类、不同阶段的牲畜对空间的不同要求&#xff0c;以保障牲畜安全和健康&a…

离线数仓同步数据3

业务数据_增量表数据同步 1&#xff09;Flume配置概述2&#xff09;Flume配置实操3&#xff09;通道测试4&#xff09;编写Flume启停脚本 1&#xff09;Flume配置概述 Flume需要将Kafka中topic_db主题的数据传输到HDFS&#xff0c;故其需选用KafkaSource以及HDFSSink&#xff…

内网穿透实现Windows远程桌面访问Ubuntu,简单高效的远程桌面解决方案

文章目录 前言1. ubuntu安装XRDP2.局域网测试连接3.安装cpolar内网穿透4.cpolar公网地址测试访问5.固定域名公网地址 前言 XRDP是一种开源工具&#xff0c;它允许用户通过Windows RDP访问Linux远程桌面。 除了Windows RDP外&#xff0c;xrdp工具还接受来自其他RDP客户端(如Fre…

牛客SQL练习三

21查找所有员工自入职以来的薪水涨幅情况 题目描述 查找所有员工自入职以来的薪水涨幅情况&#xff0c;给出员工编号emp_no以及其对应的薪水涨幅growth&#xff0c;并按照growth进行升序 CREATE TABLE employees ( emp_no int(11) NOT NULL, birth_date date NOT NULL, first…

腾讯实习测试开发岗位面试总结

腾讯测开的部门是用 go 语言,面试者是 java 技术栈。这场面试,最后还问了一个智力题,果然是腾讯的风格,目前只发现腾讯爱问这类题目,主要是考察面试者聪明不聪明。 问题记录 对go了解吗?部门主要是偏go语言的 答:说了之前学过一段时间,但是太长时间没有接触了,如果给…

uni-app 之 uni.request 网络请求API接口

uni-app 之 uni.request 网络请求API接口 image.png <template><!-- vue2的<template>里必须要有一个盒子&#xff0c;不能有两个&#xff0c;这里的盒子就是 view--><view>--- uni.request 网络请求API接口 ---<view><!-- 免费的测试接口 --…

android——服务JobService

JobService是Android L时候官方新增的组件&#xff0c;适用于需要特定条件才执行后台任务的场景。由系统统一管理和调度&#xff0c;在特定场景下使用JobService更加灵活和省心&#xff0c;相当于是Service的加强或者优化。 JobService是JobScheduler的回调&#xff0c;是安排的…

制造企业如何优化物料控制?

导 读 ( 文/ 2127 ) 物料控制是指对制造过程中所涉及的物料流动和库存进行有效管理和控制的过程。它包括物料需求计划、供应商管理、物料采购、物料接收和入库、物料库存管理以及物料发放和使用等关键环节。通过精确的物料需求计划和库存管理&#xff0c;物料控制可以确保物料供…

转载: 又拍云【PrismCDN 】低延时的P2P HLS直播技术实践

低延时的P2P HLS直播技术实践本文是第二部分《PrismCDN 网络的架构解析,以及低延迟、低成本的奥秘》低延时的P2P HLS直播技术实践 [首页 > Open Talk NO.41 | 2018 音视频技术沙龙深圳站 > 低延时 WebP2P 直播技术实践https://opentalk-blog.b0.upaiyun.com/prod/2018-0…

【群答疑】jmeter关联获取上一个请求返回的字符串,分割后保存到数组,把数组元素依次作为下一个请求的入参...

一个非常不错的问题&#xff0c;来检验下自己jmeter基本功 可能有同学没看懂题&#xff0c;这里再解释一下&#xff0c;上面问题需求是&#xff1a;jmeter关联获取上一个请求返回的字符串&#xff0c;分割后保存到数组&#xff0c;把数组元素依次作为下一个请求的入参 建议先自…

TCP流量控制和拥塞控制,具体在场景中是怎么起作用的

TCP的流量控制 所谓的流量控制就是让发送方的发送速率不要太快&#xff0c;让接收方来得及接受。利用滑动窗口机制可以很方便的在TCP连接上实现对发送方的流量控制。TCP的窗口单位是字节&#xff0c;不是报文段&#xff0c;发送方的发送窗口不能超过接收方给出的接收窗口的数值…