el-table纵向垂直表头

参考:https://www.jianshu.com/p/1f38eaffd070

<el-tablestyle="width: 100%":data="getValues":show-header="false"border:cell-style="cellStyle"
><el-table-columnv-for="(item, index) in getHeaders":key="index":prop="item"></el-table-column>
</el-table>
data() {return {headers: [{prop: 'date',label: '套餐交割时间',},{prop: 'name',label: '价格(元/kWh)',},],tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},
computed: {getHeaders() {return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])},getValues() {return this.headers.map(item => {return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});});}
},
methods: {cellStyle ({row, column, rowIndex, columnIndex}) {if(columnIndex===0) {return 'background: #F5F7FA; textAlign: center'}return 'textAlign: center'}},

在这里插入图片描述

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

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

相关文章

MySQL数据同步归档使用工具总结

数据迁移方式&工具总结 kettel的使用dataX的使用pt-archiver的使用 kettel的使用 1、中文网&#xff1a;http://www.kettle.org.cn/ 2、下载地址 3、使用kettle进行数据迁移 3.1 打开文件夹&#xff0c;运行spoon.bat 3.2 点击文件&#xff0c;新建转换 3.3 新建数据库…

ctfshow-web-红包题 葵花宝典

0x00 前言 CTF 加解密合集CTF Web合集网络安全知识库溯源相关 文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取 0x01 题目 0x02 Write Up 这道题说实话比较奇怪&#xff0c;有一个注册接口&#xff0c;先注册一个账号在&#xff0c;我注册的是admins 123456 然后登…

跨进程通讯之Binder通讯

一、oneway、in、out、inout关键字讲解 1、oneway&#xff1a;异步执行&#xff0c;不管服务器有没有执行完&#xff0c;直接返回 2、in&#xff1a;数据只能由客户端流入服务端 3、out&#xff1a;数据只能由服务端流出到客户端 4、inout&#xff1a;数据可以在服务端与客…

spice VDAgent简介

vdagent分为linux和windows&#xff0c;其中Linux分为vdagent守护进程和vdagent客户端进程&#xff0c;而windows主要为vdagent服务。 在windows中&#xff0c;通过服务方式自启动&#xff0c;并控制windows显示等。 在linux中&#xff0c; 守护进程通过 Sys-V initscript 或 s…

音视频编码格式-AAC ADT

例子:config 1408 1408(16进制) : 0001 0100 0000 1000 audioObjectType&#xff08;5bit&#xff09;为 00010 , 即 2&#xff0c; profie (audioObjectType -1 ) AAC LC samplingFrequencyIndex (4bit) 为 1000 , 即 8 , 对应的采样频率为 16000 channelConfiguration (…

C# OpenVinoSharp PP-TinyPose 人体姿态识别

效果 项目 部分代码 using OpenCvSharp; using OpenCvSharp.Extensions; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;name…

QTableView通过setColumnWidth设置了列宽无效的问题

在用到QT的QTableView时&#xff0c;为了显示效果&#xff0c;向手动的设置每一列的宽度&#xff0c;但是如下的代码是无效的。 ui->tableView->setColumnWidth(0,150);ui->tableView->setColumnWidth(1,150);ui->tableView->setColumnWidth(2,150);ui->t…

源码编译risc-v虚拟机和编译器 riscv-gnu-toolchain 和 riscv-tools 在ubuntu 22.04

1. 编译 riscv-gnu-toolchain 1.1 预备环境 $ sudo apt-get install autoconf automake autotools-dev curl python3 libmpc-dev libmpfr-dev libgmp-dev gawk build-essential bison flex texinfo gperf libtool patchutils bc zlib1g-dev libexpat-dev 1.2 下载源代码 http…

lv4 嵌入式开发-1 Linux文件IO

目录 1 文件的概念和类型 2 如何理解标准IO 3 流(FILE)的含义 3.1 流 3.2 文本流和二进制流 3.3 流的缓冲类型 4 小结 5 缓存区实验 1 文件的概念和类型 概念&#xff1a;一组相关数据的有序集合 文件类型&#xff1a; 常规文件 r 目录文件 d 字符设备文件 …

ChatGPT AIGC 一键总结SQL优化所有知识点

SQL优化一直是程序员非常关注的内容,使用ChatGPT AIGC结合思维导图进行总结SQL优化的所有知识点内容。 非常简单实用的操作,就得到了如何进行SQL优化的所有细节。 更多内容见: AIGC ChatGPT ,BI商业智能, 可视化Tableau, PowerBI, FineReport, 数据库Mysql Oracle, Off…

Flink CDC 菜鸟教程 -环境篇

本教程将介绍如何使用 Flink CDC 来实现这个需求, 在 Flink SQL CLI 中进行,只涉及 SQL,无需一行 Java/Scala 代码,也无需安装 IDE。 系统的整体架构如下图所示: 环境篇 1、 准备一台Linux 2、准备教程所需要的组件 下载 flink-1.13.2 并将其解压至目录 flink-1.13.2 …

阿里后端开发:抽象建模经典案例【文末送书】

文章目录 写作前面1.抽象思维2.软件世界中的抽象3. 经典抽象案例4. 抽象并非一蹴而就&#xff01;需要不断假设、验证、完善5. 推荐一本书 写作末尾 写作前面 在互联网行业&#xff0c;软件工程师面对的产品需求大都是以具象的现实世界事物概念来描述的&#xff0c;遵循的是人…

XL-LightHouse 与 Flink 和 ClickHouse 流式大数据统计系统

一个Flink任务只能并行处理一个或少数几个数据流&#xff0c;而XL-LightHouse一个任务可以并行处理数万个、几十万个数据流&#xff1b; 一个Flink任务只能实现一个或少数几个数据指标&#xff0c;而XL-LightHouse单个任务就能支撑大批量、数以万计的数据指标。 1、XL-LightHo…

预测多基因扰动的转录结果

了解细胞对基因扰动的反应是许多生物医学应用的核心&#xff0c;从识别癌症中涉及的基因相互作用到开发再生医学方法。然而&#xff0c;可能的多基因扰动数量的组合爆炸严重限制了实验验证。在这里&#xff0c;作者提出了图增强的基因激活和抑制模拟器&#xff08;GEARS&#x…

06-mq

1、消息队列有什么优点和缺点? 优点&#xff1a; 解耦、异步、削峰填谷。 缺点&#xff1a; 系统可用性降低 系统复杂性提高 一致性问题 2、常见消息队列的比较 3、Kafka的特性 1.消息持久化 2.高吞吐量 3.扩展性强&#xff08;动态&#xff09;4集群&#xff0b;4台集群…

硬件【10】运放-1-理想运放与虚断虚短的来源

1 概述 今天开始&#xff0c;聊一聊运放吧&#xff0c;之前很多兄弟们也提了这个要求。正好我最近也想深入看看运放方面的&#xff0c;那么就借这个机会一步一步再搞一搞吧。 运放这个器件相对于电阻&#xff0c;电容&#xff0c;三极管&#xff0c;MOS管等器件算是比较复杂的…

Docker进阶:Docker Compose(容器编排) 管理多容器应用—实战案例演示

Docker进阶&#xff1a;Docker Compose&#xff08;容器编排&#xff09; 管理多容器应用—实战案例演示 一、Docker Compose简介二、Docker Compose安装三、Docker Compose卸载四、Docker Compose核心概念4.1、一文件原则&#xff08;docker-compose.yml&#xff09;4.2、服务…

vue交互

目录 交互 指有人参与的&#xff0c;程序并非按照一定的顺序去执行&#xff0c;可以人为介入&#xff0c;让程序或应用去根据输入选择执行流程&#xff0c;提供给我们需要的信息。 前、后端 前端&#xff1a;指客户端&#xff0c;浏览器 用户可以直接看到、操作&#xff0c;可…

【大数据之Kafka】十二、Kafka之offset位移及漏消费和重复消费

1 offset的默认维护位置 Kafka0.9版本之前&#xff0c; consumer默认将offset保存在Zookeeper中。从0.9版本开始&#xff0c;consumer默认将offset保存在Kafka一个内置的topic中&#xff0c;该topic为 consumer_offsets。   consumer_offsets 主题里面采用 key 和 value 的方…

【网络教程】记一次使用Docker手动搭建BT宝塔面板的全过程(包含问题解决如:宝塔面板无法开启防火墙,ssh,nginx等)

文章目录 准备安装安装宝塔面板开启ssh和修改ssh的密码导出镜像问题解决宝塔面板无法开启防火墙无法启动ssh设置密码nginx安装失败设置开机启动相关服务准备 演示的系统环境:Ubuntu 22.04.3 LTS更新安装/升级docker到最新版本升级docker相关命令如下# 更新软件包列表并自动升级…