el-table纵向垂直表头

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

javascript 复制代码
<el-table
  style="width: 100%"
  :data="getValues"
  :show-header="false"
  border
  :cell-style="cellStyle"
>
  <el-table-column
    v-for="(item, index) in getHeaders"
    :key="index"
    :prop="item"
  >
  </el-table-column>
</el-table>
javascript 复制代码
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 弄'
	      }
	    ]
    }
  },
javascript 复制代码
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,});
    });
  }
},
javascript 复制代码
methods: {
    cellStyle ({row, column, rowIndex, columnIndex}) {
      if(columnIndex===0) {
        return 'background: #F5F7FA; textAlign: center'
      }
      return 'textAlign: center'
    }
  },
相关推荐
烛阴5 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack23 分钟前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
315356691325 分钟前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx30 分钟前
前端-CSS-day1
前端·css
知否技术37 分钟前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust43 分钟前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css