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 然后登…

Hexo中引入另一个文件内容

有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 安装插件 npm install hexo-include-markdown --save 创建模板目录 source/_template 创建模板 source/_template/tj.md 配置_config.y…

跨进程通讯之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…

maven根据操作系统的不同打包时引入不同的依赖(jar)

在进行java开发时经常遇到一种情况&#xff0c;就是windows下和linux下需要引入的jar包是不一样的。 比如说我们需要使用java来操作OpenGL库&#xff0c;我们就需要通过maven引入JOGL的依赖&#xff0c; 然而在window下和在linux下需要引入JOGL的依赖是不一样的&#xff1a; …

音视频编码格式-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 (…

vue预览txt

1.本地文件预览&#xff0c;网上很多使用iframe和embed标签的&#xff0c;但是我尝试都不可以&#xff0c;有了解的可以分享下原因。 2.读取txt数据并显示在div中&#xff1a; 2.1 本地txt <input type"file" ref"file"/> <div v-html"txtH…

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…

创建git分支命名原则

使用有意义的名称来描述分支的用途或目的&#xff0c;例如feature/add-login-page、bugfix/fix-typo等。 分支名称应该简短但明确&#xff0c;避免使用过长或复杂的名称。 使用斜杠(/)分隔不同的分支类型&#xff0c;例如feature、bugfix、hotfix、release、develop、main等。…

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 字符设备文件 …

前端工程化小记

1.引言 工业界一直都是&#xff1a;能机器做的都交给机器&#xff0c;因为人更容易犯错。所以关于代码语法检查、代码格式化、commit注释规范、代码编译等等这些工作量繁杂且巨大的苦力活&#xff0c;除非你不想把人当马用&#xff0c;那还是交给机器去做&#xff0c;是吗&…

【尚硅谷】第05章:随堂复习与企业真题(数组)

来源&#xff1a;尚硅谷Java零基础全套视频教程(宋红康2023版&#xff0c;java入门自学必备) 基本都是宋老师发的资料里面的内容&#xff0c;只不过补充几个资料里没直接给出答案的问题的答案。 不想安装markdown笔记的app所以干脆在这里发一遍。 第05章&#xff1a;随堂复习…

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;遵循的是人…

微信小程序父子组件通讯方法

自定义方法中发送命令 const app getApp() Component({options: {styleIsolation: isolated},data: {},properties: {},attached() {this.init()},methods: {init() {console.log(父组件执行子组件)},clickBtn() {this.triggerEvent(changeRoute, 发送数据到父组件, {})},} }…

typeScript--[函数定义]

一.TypesScript 函数的定义 函数的定义包括两种类型&#xff1a;函数声明和函数表达式。 1.函数声明 function hello(): string {return "hello" } 2.函数表达式 var hello1 function (): string {return "hello" } 二.函数之可选参数 参数后面的限…