背景

前端一般的表格样式都是横向表头，数据纵向排列，一一对应的形式出现
纵向表格这种情况的需求也是会经常存在出现的。如下图，需要几个数据间进行对比展示

纵向表格效果如图

直接贴代码

<template>
    <el-table :data="resultList" style="width: 100%" :header-cell-class-name="handleCellclass" :cell-class-name="handleCellclass">
        <el-table-column prop="title" label="" width="100">
            <template slot-scope="scope">
                <span>{{identifyResultList[scope.$index].title}}</span>
            </template>
        </el-table-column>
        <el-table-column v-for="(item,index) in tableData" :key="index" :label="'识别结果'+(index+1)" :width="tableDataTopWidth(index)">
            <template slot-scope="scope">
                    <span>{{item[scope.row.label] || '-'}}</span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
export default {
  data() {
    return {
          tableData: [
            {
              batchNo: "2020102801"
              createDate: "2020-10-28 19:21:56"
              id: 5062,
              aaa:'asdsd',
              bbb:'2432',
              ccc:'aaaawewewqccc'
            },
            {
              batchNo: "2020102801"
              createDate: "2020-10-28 19:21:56"
              id: 5062,
              aaa:'asdsd',
              bbb:'2432',
              ccc:'aaaawewewqccc'
            }
          ],
           resultList: [
                { title: '批次号', label: 'batchNo' },
                { title: 'id', label: 'id' },
                { title: 'aaa', label: 'aaa' },
                { title: 'bbb', label: 'bbb' },
                { title: 'ccc', label: 'ccc' },
                { title: '时间', label: 'createDate' },
            ],
      }
    };
  },
  methods: {
     handleCellclass({ column, columnIndex }) {
            if (columnIndex !== 0 && column.label.indexOf("识别结果") !== -1) {
                return "tableColumnClass"
            } else {
                return ''
            }
        },
 },

  }
};
</script>

代码跟一般纵向列表差不多，就是数据格式的不同

参考地址：juejin.im/post/684490…

vue element table 纵向表格

背景