el-table 垂直表头

效果如下:

代码如下:

<template><div class="vertical_head"><el-table style="width: 100%" :data="getTblData" :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: "date",label: "日期",},{prop: "name",label: "姓名",},{prop: "address",label: "地址",},],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"]);},getTblData() {return this.headers.map((item) => {return this.tableData.reduce((pre, cur, index) =>Object.assign(pre, { ["value" + index]: cur[item.prop] }),{ title: item.label });});},},methods: {},
};
</script>

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

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

相关文章

Android图形-架构1

目录 引言 Android图形的关键组件&#xff1a; Android图形的pipeline数据流 BufferQueue是啥&#xff1f; 引言 Android提供用于2D和3D图形渲染的API&#xff0c;可与制造商的驱动程序实现代码交互&#xff0c;下面梳理一下Android图形的运作原理。 应用开发者通过三种方…

阿里后端开发:抽象建模经典案例

0.引言 在互联网行业&#xff0c;软件工程师面对的产品需求大都是以具象的现实世界事物概念来描述的&#xff0c;遵循的是人类世界的自然语言&#xff0c;而软件世界里通行的则是机器语言&#xff0c;两者间跨度太大&#xff0c;需要一座桥梁来联通&#xff0c;抽象建模便是打…

Ceph基础知识和基础架构认识

1 Ceph基础介绍 Ceph是一个可靠地、自动重均衡、自动恢复的分布式存储系统&#xff0c;根据场景划分可以将Ceph分为三大块&#xff0c;分别是对象存储、块设备存储和文件系统服务。在虚拟化领域里&#xff0c;比较常用到的是Ceph的块设备存储&#xff0c;比如在OpenStack项目…

Android开机动画

Android开机动画 1、BootLoader开机图片2、Kernel开机图片3、系统启动时&#xff08;BootAnimation&#xff09;动画3.1 bootanimation.zip位置3.2 bootanimation启动3.3 SurfaceFlinger启动bootanimation3.4 播放开机动画playAnimation3.6 开机动画退出检测3.7 简易时序图 4、…

【Vue】 Vue3 安装说明,适合小白新手

1、独立版本 我们可以在 Vue.js 的官网上直接下载最新版本, 并用 下载 Vue.js https://unpkg.com/vuenext 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN&#xff0c;国内还没发现哪一家比较好&#xff0c;目前还是建议下载到本地。 Staticfile CDN&#xff08;国内&am…

【Python】爬虫练习-爬取豆瓣网电影评论用户的观影习惯数据

目录 前言 一、配置环境 1.1、 安装Python 1.2、 安装Requests库和BeautifulSoup库 1.3.、安装Matplotlib 二、登录豆瓣网&#xff08;重点&#xff09; 2.1、获取代理 2.2、测试代理ip是否可用 2.3、设置大量请求头随机使用 2.4、登录豆瓣网 三、爬取某一部热门电影…

【Linux】高级IO --- 多路转接,select,poll,epoll

所有通过捷径所获取的快乐&#xff0c;无论是金钱、性还是名望&#xff0c;最终都会给自己带来痛苦 文章目录 一、五种IO模型1.什么是高效的IO&#xff1f;&#xff08;降低等待的时间比重&#xff09;2.有哪些IO模型&#xff1f;哪些模型是高效的&#xff1f;3.五种IO模型的特…

简单理解微服务限流、降级、熔断

微服务限流、降级、熔断分别都是什么意思&#xff0c;我们平时工作中为什么要关注这些东西呢&#xff1f; 公司不断的发展壮大&#xff0c;一开始处于蛮荒时代&#xff0c;咱们从单体应用过渡到微服务的时候&#xff0c;可能还是那一套单体的思想&#xff0c;再加上用户量可能…

大模型参数高效微调技术原理综述(二)-BitFit、Prefix Tuning、Prompt Tuning

随着&#xff0c;ChatGPT 迅速爆火&#xff0c;引发了大模型的时代变革。然而对于普通大众来说&#xff0c;进行大模型的预训练或者全量微调遥不可及。由此&#xff0c;催生了各种参数高效微调技术&#xff0c;让科研人员或者普通开发者有机会尝试微调大模型。 因此&#xff0c…

2023-9-1-虚拟网卡学习

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f4a5;&#x1f4a5;&#x1f4a5;欢迎来到&#x1f91e;汤姆&#x1f91e;的csdn博文&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f49f;&#x1f49f;喜欢的朋友可以关注一下&#xf…

日常开发小点汇总(1)

1.浮动元素 生成一个浮动流&#xff0c;块级元素看不到&#xff0c;文本、行内属性元素及行内元素可见 <div class"demo1"></div><span>123</span><div class"demo2"></div>.demo1 {width: 100px;height: 100px;backg…

在 linux 虚拟机上安装配置 hive

目录 一 下载hive 安装包 二 解压 hive 并配置环境变量 三 配置hive 的配置文件 四 更新 guava 五 hive初始化 六 开启远程连接 七 使用datagrip 连接 hive 一 下载hive 安装包 百度网盘资源如下&#xff1a; 链接: https://pan.baidu.com/s/18jF-Qri0hc52_rtL61O0YQ?…

Unity中神秘的Transform和transform(小写)的关系

1.为什么Transform类是保护的不能通过new 来实例化对象,也没有静态函数,而Rotate()这种方法却属于它,该如何访问? Transform 类还是被保护的不允许用户修改! protected Transform(); 是一个受保护的构造函数,不能直接实例化 Transform 类。 2.为甚么transform可以访问Tr…

2023年行研行业研究报告

第一章 行业概述 1.1 行研行业 行业定义为同一类别的经济活动&#xff0c;这涉及生产相似产品、应用相同生产工艺或提供同类服务的集合&#xff0c;如食品饮料行业、服饰行业、机械制造行业、金融服务行业和移动互联网行业等。 为满足全球金融业的需求&#xff0c;1999年8月…

蓝桥杯备赛(Day5)——二叉树

二叉树存储 普通做法,二叉树一个节点包括结点的数值以及指向左右子节点的指针 在class Node中 def __init__(self,s,l=None,r=None):self.val=Noneself.l=lself.r=r 在竞赛中,我们往往使用静态数组实现二叉树,定义一个大小为N的静态结构体数组,使用其来存储一棵二叉树。…

使用生成式 AI 增强亚马逊云科技智能文档处理

数据分类、提取和分析对于处理大量文档的组织来说可能具有挑战性。传统的文档处理解决方案是手动的、昂贵的、容易出错的,并且难以扩展。利用 Amazon Textract 等 AI 服务,亚马逊云科技智能文档处理(IDP)允许您利用业界领先的机器学习(ML)技术来快速准确地处理任何扫描文档或图…

Android后退堆栈

修改代码 现在的ItemClick使得用户单击其中一个项目时就会跳转&#xff0c;现在要修改其使得在一个小屏幕设备上才会这样做&#xff0c;在一个大屏幕设备上运行用户选择一个训练项目时在右边的片段显示响应的信息。 希望片段处理后退的方式&#xff1a;假设用户在手机上运行这…

酷克数据与华为合作更进一步 携手推出云数仓联合解决方案

在一起&#xff0c;共迎新机遇&#xff01;8月25-26日&#xff0c;2023华为数据存储用户精英论坛在西宁召开。酷克数据作为国内云原生数据仓库的代表企业&#xff0c;也是华为重要的生态合作伙伴&#xff0c;受邀参与本次论坛&#xff0c;并展示了云数仓领域最新前沿技术以及联…

华为云Stack的学习(五)

六、华为云stack服务简介 1.云服务在华为云Stack中的位置 云服务对接多个数据中心资源池层提供的资源&#xff0c;并向各种行业应用提供载体。 2.华为云Stack通用服务 2.1 云计算的服务模式 2.2 计算相关的云服务 2.3 存储相关的云服务 2.4 网络相关的云服务 3.云化案例 **…

C#,数值计算——NRf2的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class NRf2 : UniVarRealValueFun { public NRf3 f3 new NRf3(); public RealValueFun z1; public RealValueFun z2; public NRf2(RealValueFun zz1, RealValueFun zz2) …