el-table 纵向 横向 多级表头

server/2024/12/4 16:16:02/
<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.ppmy.cn/server/147320.html

相关文章

【docker】docker compose多容器部署

Docker Compose 的详细讲解与实际应用 什么是 Docker Compose&#xff1f; Docker Compose 是一个工具&#xff0c;用于定义和运行多容器 Docker 应用。 通过一个 docker-compose.yml 文件&#xff0c;可以同时启动多个服务&#xff0c;简化多容器管理。 Docker Compose 的核心…

echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

一.地图立体效果 方法1:两层地图叠加 实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差 配置项参考如下代码: geo: [{zlevel: 2,top: 96,map: map,itemStyle: {color: #091A51ee,opacity: 1,borderWidth: 2,borderColor: #16BAFA…

如何管理Stream中的事件流

文章目录 1. 概念介绍2. 管理方法3. 示例代码我们在上一章回中介绍了事件流相关的内容,本章回中将介绍如何管理Stream事件流。闲话休提,言归正传,让我们一起Talk Flutter吧。 1. 概念介绍 我们简单回顾一下前面的知识:Stream把相关的事件组成了事件流,并且提供方法来监听…

Epsilon2系列战术级微型惯性RTK卫星高精度组合导航系统0.5°/h

FDIsystems推出了Epsilon2系列战术级微型惯性RTK卫星高精度组合导航系统&#xff0c;是Epsilon系列的全面升级。搭载经过严格温度转台校准的0.5/h的惯性器件和全系统多频点GNSS系统&#xff0c;内置高性能磁力计以及气压传感器&#xff0c;具有厘米级定位定向能力&#xff0c;采…

前端图像处理(三)

目录 一、大文件分片 二、图片添加防篡改水印 2.1、主图水印图&#xff08;vue2&#xff09; 2.2、主图文字&#xff08;vue3&#xff09; 一、大文件分片 并行传输&#xff1a;多个数据块可以同时并行传输&#xff0c;利用多线程或多路复用技术提高传输效率&#xff1b;减…

【前端入门】文档流相关概念

文章目录 布局文档流概念特点缺陷Demo 脱离文档流概念产生原因特点DemoFloat实现绝对定位实现 文本流概念特性Demo 布局 网页布局是指通过HTML和CSS定义网页元素的位置和排列方式&#xff0c;以创建视觉上有序且功能齐全的页面结构。 布局设计涉及使用块级和内联元素的组合&a…

qt QGraphicsRotation详解

1、概述 QGraphicsRotation 是 Qt 框架中 QGraphicsTransform 的一个子类&#xff0c;它专门用于处理图形项的旋转变换。通过 QGraphicsRotation&#xff0c;你可以对 QGraphicsItem&#xff08;如形状、图片等&#xff09;进行旋转操作&#xff0c;从而创建动态和吸引人的视觉…

命令模式 (Command Pattern)

文章目录 命令模式 (Command Pattern)原理优点缺点示例代码场景描述1. 定义命令接口2. 定义具体命令类&#xff08;实现命令接口&#xff09;3. 定义接收者类&#xff08;设备&#xff09;4. 定义遥控器&#xff08;调用者&#xff09;5. 客户端代码输出结果 UML 类图使用场景扩…