首页 > 其他分享 >el-table 表头竖向排列实现

el-table 表头竖向排列实现

时间:2023-03-25 15:34:16浏览次数:52  
标签:pre el return name 王小虎 普陀区 表头 竖向 date

 

<el-table
            style="width: 100%"
            :data="getValues"
            :show-header="false"
            :cell-style="cellStyle"
            border
          >
            <el-table-column
              v-for="(item, index) in getHeaders"
              :key="index"
              :prop="item"
            >
            </el-table-column>
          </el-table>

 

  data () {
    return {


      headers: [
        {
          prop: 'date',
          label: '先进企业',
        },
        {
          prop: 'name',
          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'])
    },
    getValues () {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label, });
      });
    }
  },
   cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "background:#f5f7fa;text-align: center;";
      }
    },

 

标签:pre,el,return,name,王小虎,普陀区,表头,竖向,date
From: https://www.cnblogs.com/dianzan/p/17254824.html

相关文章

  • Sentinel 限流、熔断降级
    一、什么是Sentinel?随着微服务的流行,服务和服务之间的稳定性变得越来越重要。Sentinel以流量为切入点,从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。S......
  • Liunx 搭建 Elk 集群配置 之 kibana 搭建
    官网下载kibana只需要在node01机器上安装即可中文社区下载选择自己对应的版本即可我用的是kibana-7.4.0-linux-x86_64跟我的elasticsearch版本一致的。下载完上传解压即......
  • Liunx 搭建 Elk 集群配置 之 Logstash 搭建
    下载Logstash中文社区地址我的版本是logstash-7.11.0-linux-x86_64.tar.gz上传解压#解压命令tar-zxvflogstash-7.11.0-linux-x86_64.tar.gz-C/opt简单测试#到bin目......
  • elasticsearch 查看集群运行状态api (全部Cat命令合集以及返回参数解释)
    Cat的所有命令http://192.168.6.39:9201/_cat/_cat/allocation/_cat/shards/_cat/shards/{index}/_cat/master/_cat/nodes/_cat/tasks/_cat/indices/_cat/indices/......
  • IntelliJ IDEA 修改只读模式和可写模式
    可以在IntelliJIDEA对代码修改为只读模式。当你把一个源代码修改为只读模式的话,在右上角将会显示这个文件为只读的。如果你希望把这文件修改为可写的,可以直接......
  • IntelliJ IDEA 撤销和反撤销
    IntelliJIDEA中Ctrl+Z是撤销快捷键反撤销快捷键为:Ctrl+Shift+Z这个和Windows常用的快捷键不一样,有时候你可能会尝试使用Ctrl+Y,这个是没有办法反撤销的。......
  • 编写Hello World
    新建文件夹,记住路径,存放代码新建java文件文件后缀名为.java命名为Hello.java(系统可能不显示后缀名,需手动打开)编写代码1publicclassHello{2public......
  • 使用Map+函数式优化if else
    使用Map+函数式接口优化ifelse工作中遇到一个接口要返回不同数据表中的数据,首先想到的是使用if-else或者switchcase:例如: if(("1").equals(dataType)){re......
  • COMP30024 Artificial Intelligence
    ProjectPartASinglePlayerInfexionCOMP30024ArtificialIntelligenceMarch2023OverviewInthisfirstpartoftheproject,youwillwriteaprogramtoplayasi......
  • Java使用IntelliJ IDEA创建控制台程序并通过JDBC连接到数据库
    1、创建一个java控制台程序并测试首先,直接新建一个默认的空的Java模块即可,随便取个名字在src目录下右键->新建->创建一个包,随便取个名字在包中创建一个Test类,写个helloworld......