vue3 element table 竖向排列 左右2列 4列

先上效果图

<template>
  <div class="container">
    <Card>
      <section>
        <el-table
          :show-header="false"
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          :cell-style="columnStyle"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column width="240" prop="name"></el-table-column>
          <el-table-column prop="amount1"></el-table-column>
        </el-table>
      </section>
    </Card>
  </div>
</template>

<script setup>
const tableData = [
  {
    name: '名称：',
    amount1: '是客户公司就价格肯定节假日给飞哥'
  },
  {
    name: '编号：',
    amount1: '2021-7458-1928139'
  },
  {
    name: '供应商：',
    amount1: '的发哈夫和剪短发i的ZIJS据'
  }
]
//样式 当第0列时  背景色不一样
function columnStyle({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    return 'background:#f3f6fc;'
  } else {
    return 'background:#ffffff;'
  }
}

</script>

4列

上代码

<template>
  <div class="container pd">
    <Title title="中标候选人公示"></Title>
    <Card>
      <section>
        <el-table
          :show-header="false"
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          :cell-style="columnStyle"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column width="240" prop="name"></el-table-column>
          <el-table-column prop="amount1"></el-table-column>
          <el-table-column width="240" prop="number"></el-table-column>
          <el-table-column prop="amount2"></el-table-column>
        </el-table>
      </section>
    </Card>
  </div>
</template>

<script setup>
import Title from '_components/common/Title'
const tableData = [
  {
    name: '名称：',
    amount1: '是客户公司就价格肯定节假日给飞哥',
    number: '编号：',
    amount2: '20154547889'
  },
  {
    name: '编号：',
    amount1: '2021-7458-1928139',
    number: '编号：',
    amount2: '20154547889'
  },
  {
    name: '供应商：',
    amount1: '的发哈夫和剪短发i的ZIJS据',
    number: '编号：',
    amount2: '20154547889'
  }
]

function columnStyle({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0 || columnIndex === 2) {
    return 'background:#f3f6fc;'
  } else {
    return 'background:#ffffff;'
  }
}

</script>