vue+elementUI實現橫向表格（單列）

<template>
   <div>
     <section>
       <el-table
         :show-header="false"
         :data="tableData"
         border
         :cell-style="columnStyle"
         style="width: 100%; margin-top: 20px"
       >
         <el-table-column prop="name" align="center"></el-table-column>
         <el-table-column prop="value" align="center"></el-table-column>
       </el-table>
     </section>
   </div>
</template>
<script>
export default {
  name: "TransverseTable",
  props: ['tableData'],
  data() {
    return {};
  },
  methods: {
    // 自定義列背景色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        // 修改每行第一個單元格的背景色
        return "background:#f3f6fc;";
      }else{
        return "background:#ffffff;";
      }
    },
    
  }
};
</script>

tableData數據格式:

[
        {
          name: "名稱",
          value: 'tester',
        },
        {
          name: "創建人",
          value: '張三',
        },
        {
          name: "描述",
          value: '這是描述',
        },
        {
          name: "耗時",
          value: 1,
        },
]

使用:

<transverse-table :tableData="table_data"></transverse-table>

import TransverseTable from '@/components/TransverseTable'

components: {
   TransverseTable
}

效果: