el-table 纵向垂直表头

<template><div class="element-main"><div> Element-ui 官方提供 table Demo</div><el-tableborderstyle="width: 100%":data="tableData"><el-table-column prop="courseName" label="课程信息" width="180"></el-table-column><el-table-column prop="courseBook" label="教材信息" width="180"></el-table-column><el-table-column prop="price" label="单价"></el-table-column></el-table><div>===================================== 分割线 =====================================</div><div>行列转换后的 Demo</div><el-tableborderstyle="width: 100%":data="getValues":show-header="false"><el-table-columnv-for="(item, index) in getHeaders":key="index":prop="item"></el-table-column></el-table></div>
</template><script>
export default {data() {return {headers: [{prop: 'courseName',label: '课程信息'},{prop: 'courseBook', label: '教材信息'},{prop: 'price',label: '单价'},],tableData:[{"courseId": 1,"courseName": "英语写作", "courseBook": "英语写作基础教程","price": 3500},{"courseId": 2,"courseName": "综合英语(三)",": "新编英语教程2","price": 3350}, {"courseId": 3,"courseName": "英语国家社会与文化","courseBook": "致用英语 英语国家概况 (第二版)","price": 2900 },{"courseId": 3,"courseName": "英语国家社会与文化","courseBook": "致用英语 英语国家概况 (第二版)","price": 2900,}],}},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,});});}},
};
</script>

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

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

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

相关文章

Mysql主从同步原理

文章目录 前言同步原理复制的核心流程写在最后 前言 随着社会的进步大家对服务端应用程序的性能指标有着越来越高的要求&#xff0c;比如响应时间、吞吐率、QPS、TPS等等。基本上大多数系统都会要求响应时间不超过3s&#xff0c;当然对吞吐量和并发量也会根据具体的业务场景进…

C#编程艺术:Fizzler库助您高效爬取www.twitter.com音频

数据是当今数字时代的核心资源&#xff0c;但是从互联网上抓取数据并不容易。本文将教您如何利用C#编程艺术和Fizzler库高效爬取Twitter上的音频数据&#xff0c;让您轻松获取所需信息。 Twitter简介 Twitter是全球最大的社交媒体平台之一&#xff0c;包含丰富的音频资源。用…

从DNS到HTTPS

一、HTTPS定义 超文本传输安全协议&#xff08;HyperText Transfer Protocol Secure&#xff0c;缩写&#xff1a;HTTPS&#xff09;是一种通过计算机网络进行安全通信的传输协议。 HTTPS经由HTTP进行通信&#xff0c;利用SSL/TLS来加密数据包。其主要目的&#xff0c;是提供对…

Android原生实现分段选择

六年前写的一个控件&#xff0c;一直没有时间总结&#xff0c;趁年底不怎么忙&#xff0c;整理一下之前写过的组件。供大家一起参考学习。废话不多说&#xff0c;先上图。 一、效果图 实现思路使用的是radioGroup加radiobutton组合方式。原理就是通过修改RadioButton 的backgr…

初始JVM

目录 一、什么是JVM 二、JVM与字节码 三、Java程序运行机制 四、JVM 的主要组成部分及其作用 一、什么是JVM JVM 本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件 二、JVM与字节码 三、Java程序运行机制 首先利用IDE集成开发工具编写Java源代码…

Docker 部署RAP2

1、Github介绍 https://github.com/thx/rap2-delos 2、安装Docker环境 yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo yum install -y docker-ce systemctl enable…

环形链表、环形链表 II、有效的括号​​​​​​​(leetcode)

目录 一、环形链表 方法&#xff08;快慢指针&#xff09;&#xff1a; 二、环形链表 II 三、有效的括号 一、环形链表 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链…

C# 图标标注小工具-查看重复文件

目录 效果 项目 代码 下载 效果 项目 代码 using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Linq; using System.Security.Cryptography; using System.Windows.Forms;namespace ImageDuplicate {public partial clas…

SparkSQL 执行底层原理解析

从Spark SQL 底层架构可以看到&#xff0c;我们写的SQL语句&#xff0c;经过一个优化器&#xff08;Catalyst&#xff09;处理&#xff0c;转化为可执行的RDD&#xff0c;提交给集群执行。 SQL到RDD中间经过了一个Catalyst&#xff0c;它便是Spark SQL的核心&#xff0c;是针对…

基于医疗AI、自然语言处理技术的智能导诊系统源码,java语言开发,自主版权,可扩展至H5、小程序、app等多端

智能导诊系统源码&#xff0c;自主研发&#xff0c;演示应用案例 一、系统概述&#xff1a; 人体智能导诊系统&#xff1a;是基于医疗AI、自然语言处理技术&#xff0c;推出的在线导医分诊智能工具&#xff0c;在医疗中使用的引导患者自助就诊挂号。 在就诊的过程中有许多患者…

dockerfile——镜像构建工具详解及案例

Dockerfile Dockerfile是⼀个创建镜像所有命令的⽂本⽂件, 包含了⼀条条指令和说明, 每条指令构建⼀层, 通过docker build命令,根据Dockerfile的内容构建镜像,因此每⼀条指令的内容, 就是描述该层如何构建.有了Dockefile, 就可以制定⾃⼰docker镜像规则,只需要在Dockerfile上添…

QString的处理及中文乱码问题

QString 是 Qt 框架中用于表示字符串的一个类。它提供了丰富的功能来处理 Unicode 字符串&#xff0c;使得国际化和本地化的应用程序开发更加简单。QString 与标准 C 的 std::string 类似&#xff0c;但提供了更多与 Unicode 和国际化相关的功能。 常用功能 判空 代码演示 is…

计算机网络复习1

概论 文章目录 概论计算机网络的组成功能分类性能指标&#xff08;搞清楚每个时延的具体定义&#xff09;分层结构协议、接口和服务服务的分类ISO/OSITCP/IP两者的不同 计算机网络的组成 组成部分&#xff1a;硬件&#xff0c;软件和协议&#xff08;协议&#xff1a;传输数据…

HPCC:高精度拥塞控制

HPCC&#xff1a;高精度拥塞控制 文章目录 HPCC&#xff1a;高精度拥塞控制摘要1 引言1.1 背景1.2 现有CC的局限性1.3 HPCC的提出 2 研究动机2.1 大型RDMA部署2.2 RDMA目标2.3 当前RDMA CC中的权衡DCQCNTIMELY 2.4 下一代高速CC 3 技术方案3.1 INT3.2 HPCC设计3.3 HPPC的参数 4…

【力扣题解】P404-左叶子之和-Java题解

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【力扣题解】 文章目录 【力扣题解】P404-左叶子之和-Java题解&#x1f30f;题目描述&#x1f4a1;题解&#x1f30f;总结…

计算机毕业设计-----ssm流浪猫狗救助管理系统

项目介绍 流浪猫狗救助管理系统。该项目分为前后台&#xff1b; 前台主要功能包括&#xff1a;会员的注册登陆,流浪猫狗知识&#xff0c;领养中心&#xff0c;团队活动&#xff0c;流浪宠物详情&#xff0c;申请领养等&#xff1b; 后台主要功能包括&#xff1a;管理员的用户…

IP多播多播多播

一、简述 1、IP地址 ABCDE类地址 类别网络号第一字节固定值范围A1字节0xxx0~127B2字节10xx128~191C3字节110x192~223D4字节1110224~239E1111 计算机网络——组播地址&#xff08;多播地址、D类地址&#xff09;详解 二、多播 1、参数设置 -----IP_ADD_MEMBERSHIP加入多播…

MySQL 核心模块揭秘 |《发刊词》

1. 为什么要写专栏&#xff1f; 我还在做业务系统研发的时候&#xff0c;有一段时间&#xff0c;系统不稳定&#xff0c;慢 SQL 很多。我们团队花了很长时间持续优化 SQL。 我们有一个表格&#xff0c;从慢查询日志里整理出了很多慢 SQL。其中一些 SQL&#xff0c;按照我们的…

React面试题

1. 什么是 React&#xff1f; React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发并开源&#xff0c;广泛应用于现代 Web 应用程序的开发中。 2. React 中的组件是什么&#xff1f; 组件是 React 中构建用户界面的基本单位。它们是可重用且自包含的代码块&a…

详细讲解Java使用EasyExcel函数来操作Excel表(附实战)

目录 前言1. EasyExcel类2. 原理分析3. demo4. 实战 前言 前阵时间好奇下载Excel&#xff0c;特意学习实战了该功能&#xff1a;详细讲解Java使用HSSFWorkbook函数导出Excel表&#xff08;附实战&#xff09; 现在发觉还有个EasyExcel也可专门用来读写Excel表 1. EasyExcel类…