el-table实现转置表格

vue版本:vue2.6.10
elementui版本:2.15.14
实现效果:el-table实现行列互换

代码:

<template>
  <div class="app-container">
    <span>原始数据</span>
    <el-table
      :data="datas"
      border
    >
      <template v-for="(item, index) in columns">
        <el-table-column
          :key="index"
          :prop="item.prop"
          align="center"
          :label="item.label"
        />
      </template>
    </el-table>

    <span>行转列的数据</span>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop">
        <template slot-scope="scope">
          {{scope.row[item.prop]}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TestTable',
  data() {
    return {
      datas: [
        {
          "user_name": "小红",
          "user_sex": "女",
          "user_age": 18,
          "grade": 100
        },
        {
          "user_name": "小明",
          "user_sex": "男",
          "user_age": 20,
          "grade": 97
        },
        {
          "user_name": "小紫",
          "user_sex": "女",
          "user_age": 21,
          "grade": 99
        },
        {
          "user_name": "小李",
          "user_sex": "男",
          "user_age": 19,
          "grade": 98
        }
      ],
      columns: [
        { "label": "名称", "prop": "user_name" },
        { "label": "性别", "prop": "user_sex" },
        { "label": "年龄", "prop": "user_age" },
        { "label": "成绩", "prop": "grade" },
      ],
      tableData: [],
      columnsData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      console.log('test')
      const _this = this
      const columnObj = {} //创建标题数组中第一个对象
      columnObj.label = '名称' //第一个标题名称
      columnObj.prop = 'title' //第一个标题名称对应的字段
      _this.columnsData.push(columnObj) //第一个标题 放入标题数组中
      _this.tableData.push({ 'title': '性别' }) //表格数据中第一个对象数据 属性名叫 title 与上面的第一个prop设置一样
      _this.tableData.push({ 'title': '年龄' }) //表格数据中第二个对象数据 属性名叫 title 与上面的第一个prop设置一样
      _this.tableData.push({ 'title': '成绩' }) //表格数据中第三个对象数据 属性名叫 title 与上面的第一个prop设置一样
      var props = 'prop' //自定义字段名称
      _this.datas.forEach(function(item, index) {
        const columnObj = {}
        columnObj.label = item.user_name // 每一列的标题的名称
        columnObj.prop = props + index //自定义每一列标题字段名称
        _this.columnsData.push(columnObj)
        _this.$set(_this.tableData[0], columnObj.prop, item.user_sex) //表格数据中第一个数组对象 往里面添加自定义的属性
        _this.$set(_this.tableData[1], columnObj.prop, item['user_age']) //表格数据中第二个数组对象 往里面添加自定义的属性
        _this.$set(_this.tableData[2], columnObj.prop, item.grade) //表格数据中第三个数组对象 往里面添加自定义的属性
      })
      console.log(_this.columnsData)
      console.log(_this.tableData)
    }
  }
}
</script>

界面展示效果:
效果图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

循环结构:for循环,while循环,do-while,死循环

文章目录 for循环for案例&#xff1a;累加for循环在开发中的常见应用场景 whilewhile循环案例&#xff1a; for和while的区别&#xff1a;do-while三种循环的区别小结死循环 快捷键 ctrlaltt for循环 看循环执行多少次&#xff0c;就看有效数字有几个 快捷键 fori 示例代码&am…

Netty01NIO

NIO基础 NIO &#xff1a;non-blocking io 非阻塞 IO 笔记 www.zgtsky.top 网课&#xff1a;黑马Netty 三大组件 Channel & Buffer channel 有一点类似于 stream&#xff0c;它就是读写数据的双向通道&#xff0c;可以从 channel 将数据读入 buffer&#xff0c;也可以…

工作微信统一管理(还带监管功能)

1.会话页面(可统一管理多个微信号、聚合聊天、手动搜索添加好友、通过验证请求、查看好友的朋友圈等) 2.聊天历史(可查看 所有聊天记录&#xff0c;包括手机.上撤回、删除的消息) 3.群发助手(可以一 -次群发多个好友和群&#xff0c;还可以选择定时发送&#xff0c;目前还在内测…

docker (十二)-私有仓库

docker registry 我们可以使用docker push将自己的image推送到docker hub中进行共享&#xff0c;但是在实际工作中&#xff0c;很多公司的代码不能上传到公开的仓库中&#xff0c;因此我们可以创建自己的镜像仓库。 docker 官网提供了一个docker registry的私有仓库项目&#…

微服务之qiankun主项目+子项目搭建

主项目使用history&#xff0c;子项目使用hash模式 1. 下载安装"qiankun": "^2.10.13"2. 手动调用qiankun,使用vue脚手架搭建的项目1. 主项目配置&#xff08;我使用的是手动调用乾坤&#xff0c;在指定页面显示内容&#xff09;1. 要使用的页面中引入乾坤…

蓝桥杯备战刷题three(自用)

1.合法日期 #include <iostream> #include <map> #include <string> using namespace std; int main() {map<string,int>mp;int days[13]{0,31,28,31,30,31,30,31,31,30,31,30,31};for(int i1;i<12;i){for(int j1;j<days[i];j){string sto_strin…

Word | 论文使用 Springer LNICST 工具包进行格式化

目录 Step1&#xff1a;下载 Springer LNICST 工具包 Step2&#xff1a;导入宏文件 Step3&#xff1a;处理导入失败&#xff08;大概意思是这个宏不安全&#xff09; Step4&#xff1a;导入成功并使用 Step1&#xff1a;下载 Springer LNICST 工具包 会议官网的 SUBMISSIO…

合唱队形洛谷

这题的状态转移方程为dp[i]max(dp[i]&#xff0c;dp[j]1) 因而可以有代码 #include<iostream> #include<algorithm> using namespace std; int arr[102][2]; int a[102]; int main() { int n; cin >> n; for (int i 1; i < n; i) { cin >>…

1、docker入门

文章目录 1、tocker简介2、tocker的安装&环境配置2、配置阿里云镜像3、基本命令1、镜像命令2、docker基本命令3、镜像基本命令4、Docker 容器常用命令 1、tocker简介 新一代的虚拟化技术 2、tocker的安装&环境配置 uname -r1、首先查看liunx的内核 yum update -y2、更…

selenium-激活pycharm,以及在pycharm中使用selenium时标红报错问题处理

激活pycharm&#xff1a;http://idea.955code.com/ 01 pycharm中导入selenium报错 现象: pycharm中输入from selenium import webdriver, selenium标红 原因1: pycharm使用的虚拟环境中没有安装selenium&#xff1a; 解决方法: 在pycharm中通过设置或terminal面板重新安装s…

VR元宇宙的概念|VR体验店加盟|虚拟现实设备销售

VR元宇宙是一个结合了虚拟现实&#xff08;Virtual Reality&#xff09;和增强现实&#xff08;Augmented Reality&#xff09;等技术的概念&#xff0c;代表着一个虚拟的多维度世界。它是一个由数字化的空间构成的虚拟环境&#xff0c;可以通过虚拟现实设备进行交互和探索。 元…

本届挑战赛季军方案:基于图网络及LLM AGENT的微服务系统异常检测和根因定位方法

aiboco团队荣获本届挑战赛季军。该团队来自亿阳信通。 方案介绍 本届挑战赛采用开放式赛题&#xff0c;基于建行云龙舟运维平台的稳定性工具和多维监控系统&#xff0c;模拟大型的生活服务APP的生产环境&#xff0c;提供端到端的全链路的日志、指标和调用链数据。参赛队伍在组…

Linux系统——LAMP架构

目录 一、LAMP架构组成 1.LAMP定义 2.各组件的主要作用 3.CGI和FastCGI 3.1CGI 3.3CGI和FastCGI比较 4.PHP 4.1PHP简介 4.2PHP的Opcode语言 4.3PHP设置 二、LAMP架构实现 1.编译安装Apache httpd服务 2.编译安装Mysql 3.编译安装PHP 4.安装论坛 5.搭建博客 W…

spring boot 整合 minio存储 【使用篇】

zi导入依赖 <!--minio--><dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.0.3</version></dependency> yml配置&#xff08;默认配置&#xff09; spring:# 配置文件上传大小限制s…

LNMP 架构

环境准备&#xff1a;lnmp 需要安装 nginx mysql php 论坛/博客 软件 使用LNMP架构搭建 论坛 1. 关闭防火墙和和核心防护 systemctl disable --now firewalld setenforce 0 2. 编译安装 nginx 安装依赖包 yum -y install pcre-devel zlib-devel gcc gcc-c make 创建…

The dependencies of some of the beans in the application context form a cycle

1. 场景 项目启动报错如下&#xff1a; 翻译描述信息&#xff1a;应用程序上下文中某些bean的依赖关系形成一个循环 解释报错原因&#xff1a; 图中长方形指示的箭头代表了注入依赖的方向&#xff0c;marketSymbolServiceImpl注入了ownCurrencySettingService&#xff0c;own…

4_相机透镜畸变

理论上讲&#xff0c;是可能定义一种透镜而不引入任何畸变的。然而现实世界没有完美的透镜。这主要是制造上的原因&#xff0c;因为制作一个“球形”透镜比制作一个数学上理想的透镜更容易。而且从机械方面也很难把透镜和成像仪保持平行。下面主要描述两种主要的透镜畸变并为他…

亚马逊自养号测评:如何安全搭建环境,有效规避风险

要在亚马逊上进行自养号测评&#xff0c;构建一个真实的国外环境至关重要。这包括模拟国外的服务器、IP地址、浏览器环境&#xff0c;甚至支付方式&#xff0c;以创建一个完整的国际操作环境。这样的环境能让我们自由注册、养号并下单&#xff0c;确保所有操作均符合国际规范。…

【QT+QGIS跨平台编译】之五十五:【QGIS_CORE跨平台编译】—【qgsmeshcalcparser.cpp生成】

文章目录 一、Bison二、生成来源三、构建过程一、Bison GNU Bison 是一个通用的解析器生成器,它可以将注释的无上下文语法转换为使用 LALR (1) 解析表的确定性 LR 或广义 LR (GLR) 解析器。Bison 还可以生成 IELR (1) 或规范 LR (1) 解析表。一旦您熟练使用 Bison,您可以使用…

观成科技:加密C2框架Covenant流量分析

工具介绍 Covenant是一个基于.NET的开源C2服务器&#xff0c;可以通过HTTP/HTTPS 控制Covenant agent&#xff0c;从而实现对目标的远程控制。Covenant agent在与C2通信时&#xff0c;使用base64/AES加密载荷的HTTP隧道构建加密通道。亦可选择使用SSL/TLS标准加密协议&#xf…