vue+elementUI实现横向表格（单列）

转载

mb5fe1902d5617a 2021-09-17 14:39:00

<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
}