el-table 纵向垂直表头

html 复制代码
<template>
  <div class="element-main">
    <div> Element-ui 官方提供 table Demo</div>
    <el-table
      border
      style="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-table
      border
      style="width: 100%"
      :data="getValues"
      :show-header="false">
      <el-table-column
        v-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

相关推荐
海天胜景3 天前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
海天胜景3 天前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
喜欢敲代码的程序员4 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w9089258594 天前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
hackchen4 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦4 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想4 天前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景4 天前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
满楼、14 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
海天胜景14 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui