el-table 纵向 横向 多级表头

<el-table :data="tableData" class="diaTable":span-method="handleSpanMethod"border:header-cell-style="{background:'#292929',color:'#fff'}"><!-- 纵向表头 --><el-table-column label="纵向表头" width="100" ><!-- <el-table-column label="标准" width="140" prop="name"> --><template slot-scope="scope">{{ scope.row.colName1 }}</template><!-- </el-table-column> --></el-table-column><el-table-column label="纵向表头" width="200"  prop='colName2'><!-- <el-table-column label="标准" width="140" prop="name"> --><!-- <template slot-scope="scope">{{ scope.row.colName2 }} --><!-- {{ scope.row.verticalHeader3 }} --><!-- </template> --><!-- </el-table-column> --></el-table-column><!-- 横向表头和数据列 --><!-- <el-table-column label="横向表头1"> --><el-table-column prop="value1" label="泰康薪意保货币市场基金"></el-table-column><el-table-column prop="value2" label="泰康现金管家货币市场基金"></el-table-column><!-- </el-table-column> --><!-- <el-table-column label="横向表头2"> --><el-table-column prop="value3" label="监管规定"></el-table-column><!-- <el-table-column prop="value4" label="值4"></el-table-column> --><!-- </el-table-column> --></el-table>tableData: [{colName1: '关键指标',colName2: '基金净值(万)',value1: 'A1',value2: 'B1',value3: 'C1',},{colName1: '持有人结构',colName2: '机构投资这占比',value1: 'A2',value2: 'B2',value3: 'C2',},{colName1: '持有人结构',colName2: '前十大持有人占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金类',colName2: '现金类资产',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金类',colName2: '5日内到期金融工具',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金类',colName2: '合计',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金比例类',colName2: '现金类资产比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金比例类',colName2: '5日内到期金融工具比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '现金比例类',colName2: '合计比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '需要补的金额',colName2: '需要补的现金金额(万)',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '需要补的金额',colName2: '需要补的现金+5日年内金额(万)',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '剩余天数',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '偏离度',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '市值类加权久期',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '正回购比例',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '存款占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '逆回购占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '市值类占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '同业存单占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '组合检测类',colName2: '流动性受限资产占比',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},{colName1: '预警类',colName2: '是否对1%以上赎回收取强制赎回费',value1: 'Aa2',value2: 'Bb2',value3: 'Cc2',},],/////弹框合并单元格handleSpanMethod({ row, column, rowIndex, columnIndex }){// 判断哪一列 如果需要处理多了 使用 || 进行处理即可if (columnIndex === 0) {const _row = this.flitterDatas(this.tableData).one[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col,}}},/**合并表格的第一列,处理表格数据 */flitterDatas(arr) {let spanOneArr = []let concatOne = 0arr.forEach((item, index) => {console.log(item, index)if (index === 0) {spanOneArr.push(1)} else {//注意这里的data是表格绑定的字段,根据自己的需求来改if (item.colName1 === arr[index - 1].colName1) {//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1spanOneArr.push(0)} else {spanOneArr.push(1)concatOne = index}}})return {one: spanOneArr,}},////* 自定义样式,使纵向表头固定在左侧 */.el-table th.el-table-column--selection,.el-table th.el-table-column--expand,.el-table th:first-child {position: sticky;left: 0;/**  background-color: #f5f7fa; */background-color: #292929;z-index: 1;}.el-table th.el-table-column--selection,.el-table th.el-table-column--expand,.el-table th:first-child::after {content: "纵向表头";transform: rotate(-90deg);position: absolute;left: 25px;top: 20px;white-space: nowrap;width: 30px;}

后端返回数据

[
    {
        "jjmc": "泰康薪意保货币市场基金",   //基金名称
        "netValue": "1931271.074451",   //基金净值(万)
        "tzjgzb": "0.41%",   //机构投资者占比
        "qsdcyrzb": "0.6052%",   //前十大持有人占比
        "xjlzc": "290919.1215",    //现金类资产
        "dqjrgj": "1159500.87975",   //5日内到期金融工具
        "xjlzcFive": "1450420.00125",   //合计
        "xjlzcbl": "9.2889%",   //现金类资产
        "dqjrgjbl": "4.0025%",   //5日内到期金融工具
        "xjlzcblFive": "13.2915%",   //合计比例
        "xybxjje": "1157534.18433825",   //需要补的现金金额(万)
        "xybxjjeFive": "1446486.610425",   //合计比例(万)
        "syts": "100.91296%",    //剩余天数
        "pld": "0.0334%",   //偏离度
        "szljqjq": "55.353543",   //市值类加权久期
        "zhgbl": "4.24%",   //正回购比例
        "ckzb": "44.79%",   //存款占比
        "nhgzb": "0%",   //逆回购占比
        "szlzb": "46.58%",   //市值类占比
        "tycdzn": "31.29%",   //同业存单占比
        "ldxsxzczb": "0%",   //流动性受限资产占比
        "qzshf": "0"   //是否对1%以上赎回收取强制赎回费
    },
    {
        "jjmc": "泰康现金管家货币市场基金",
        "netValue": "1768859.846029",
        "tzjgzb": "34.08%",
        "qsdcyrzb": "10.9349%",
        "xjlzc": "863277.16688",
        "dqjrgj": "1586303.216896",
        "xjlzcFive": "2449580.383776",
        "xjlzcbl": "3.0503%",
        "dqjrgjbl": "5.605%",
        "xjlzcblFive": "8.6552%",
        "xybxjje": "551810.7099432",
        "xybxjjeFive": "380595.369872",
        "syts": "106.9356%",
        "pld": "0.0376%",
        "szljqjq": "53.494717",
        "zhgbl": "8.54%",
        "ckzb": "52.29%",
        "nhgzb": "6.85%",
        "szlzb": "46.18%",
        "tycdzn": "28.34%",
        "ldxsxzczb": "5.65%",
        "qzshf": "0"
    }
]

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

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

相关文章

网页端五子棋对战(二)---数据库连接用户登录注册接口设计postman验证

文章目录 1.用户模块--数据库的设计1.1idea新建db.sql文件1.2mysql建库建表 2.使用mybatis操作数据库2.1修改spring配置文件2.2创建实体类用户user2.3创建Mapper接口2.4实现xml配置文件 3.前后端交互接口架构4.后端代码实现4.1登录模块4.2注册模块4.3获取用户信息 5.postman验证…

【导航查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

Nginx篇之实现nginx转发兼容HTTP和Websocket两种协议

Nginx实现同时兼容http协议和websocket协议 map $http_upgrade $eop_gateway {default "eop-gateway-http";websocket "eop-gateway-ws"; }# 控制 Connection header map $http_upgrade $connection_upgrade {default "keep-alive"; # HTTP …

谷歌浏览器中搜索引擎的设置与管理

谷歌浏览器作为全球最受欢迎的网络浏览器之一&#xff0c;以其高速、稳定和丰富的功能深受用户喜爱。对于许多用户来说&#xff0c;自定义和管理搜索引擎是提升浏览体验的重要一环。本文将详细介绍如何在谷歌浏览器中设置和管理搜索引擎&#xff0c;包括如何修改默认搜索引擎、…

【Linux 篇】Docker 容器星河与镜像灯塔:Linux 系统下解锁应用部署奇幻征程

文章目录 【Linux 篇】Docker 容器星河与镜像灯塔&#xff1a;Linux 系统下解锁应用部署奇幻征程前言一 、docker上部署mysql1. 拉取mysql镜像2. 创建容器3. 远程登录mysql 二 、docker上部署nginx1. 拉取nginx镜像2. 在dockerTar目录下 上传nginx.tar rz命令3. 创建nginx容器4…

vue.js学习(day 18)

实例&#xff1a;面经基础版

XGBoost算法原理

XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一种基于梯度提升决策树的机器学习算法&#xff0c;它通过优化损失函数来构建模型。XGBoost在许多数据科学竞赛中取得了成功&#xff0c;并且由于其高效性和准确性而广受好评。 1. 梯度提升框架 在开始讨论XGBoost…

Burp Suite 全面解析:开启你的 Web 安全测试之旅

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…

vim插件管理器vim-plug替代vim-bundle

文章目录 vim-plug与vim-bundle对比vim-plug安装vim-plug管理安装插件相关文章 vim-plug与vim-bundle对比 vim-plug 和 vim-bundle 都是 Vim 的插件管理器&#xff0c;但它们有一些关键的区别。以下是两者的主要对比&#xff1a; 易用性和简洁性 vim-plug: 易用性: vim-plug …

cuda安装地址

https://developer.nvidia.com/cuda-toolkit-archivewindwos nvcc -V

LeetCode78:子集

链接&#xff1a;78. 子集 假设我们要求[1, 2, 3]的子集&#xff1a; 我们知道[1, 2]的子集是A&#xff1a; 而[1, 2, 3]就是比[1, 2]多了一个元素3&#xff1b;所以将3加入到上述A中的每个集合中&#xff0c;得到一个新集合B&#xff1a; 结论&#xff1a;[1, 2, 3]的子集就…

【IntelliJ IDEA 中 Run Dashboard 不显示端口号问题解决办法】

IntelliJ IDEA 中 Run Dashboard 不显示端口号问题解决办法 解决 IntelliJ IDEA Run Dashboard 不显示端口号问题方法一&#xff1a;删除临时文件方法二&#xff1a;设置启动参数方法三&#xff1a;编辑 Run/Debug Configurations方法四&#xff1a;检查端口占用情况方法五&…

【k8s】监控metrics-server

metrics-server介绍 Metrics Server是一个集群范围的资源使用情况的数据聚合器。作为一个应用部署在集群中。Metric server从每个节点上KubeletAPI收集指标&#xff0c;通过Kubernetes聚合器注册在Master APIServer中。为集群提供Node、Pods资源利用率指标。 就像Linux 系统一样…

如何具体实现商品详情的提取?

在电商领域&#xff0c;获取商品详情信息对于市场分析、价格比较、商品推荐等应用场景至关重要。本文将详细介绍如何使用Java编写爬虫程序&#xff0c;以合法合规的方式获取淘宝商品的详情信息&#xff0c;并提供详细的代码示例。 1. 环境准备 在开始编写爬虫之前&#xff0c;…

电子电气架构 --- E/E(电子电气架构)的重新定义

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所谓鸡汤&#xff0c;要么蛊惑你认命&#xff0c;要么怂恿你拼命&#xff0c;但都是回避问题的根源&…

40分钟学 Go 语言高并发:Go程序性能优化方法论

Go程序性能优化方法论 一、性能指标概述 指标类型关键指标重要程度优化目标CPU相关CPU使用率、线程数、上下文切换⭐⭐⭐⭐⭐降低CPU使用率&#xff0c;减少上下文切换内存相关内存使用量、GC频率、对象分配⭐⭐⭐⭐⭐减少内存分配&#xff0c;优化GC延迟指标响应时间、处理延…

linux工程师运维工程师.云计算工程师面试题.集锦

NETWORK 1 请描述 TCP/IP 协议中主机与主机之间通信的三要素 参考答案 IP 地址( IP address) 子网掩码(subnet mask) IP 路由( IP router) 2 请描述 IP 地址的分类及每一类的范围 参考答案 A 类 1-126 B 类 128-191 C 类 192-223 D 类 224-239 组播(多播) E 类 240-25…

HCIE IGP双栈综合实验

实验拓扑 实验需求及解法 本实验模拟ISP网络结构&#xff0c;R1/2组成国家骨干网&#xff0c;R3/4组成省级网络&#xff0c;R5/6/7组成数据中 心网络。 配置所有ipv4地址&#xff0c;请自行测试直连。 R1 sysname R1 interface GigabitEthernet0/0/0ip address 12.1.1.1 255.…

springboot/ssm校园闲置物品交易系统ava大学生二手闲置交易平台web二手源码

springboot/ssm校园闲置物品交易系统ava大学生二手闲置交易平台web二手源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数…

[CSP-J 2024] 地图探险

题目传送门 P11228 [CSP-J 2024] 地图探险 题解思路&#xff1a; 搜索 题目读完&#xff0c;首先应该意识到这是一道考察搜索的题目。只不过限定搜索方向&#xff08;d表示方向&#xff0c;越界或者碰到障碍物后右转更改方向&#xff09;&#xff0c;限定搜素次数&#xff0…