如何使用iview的table表格制作竖向表格

iView是一个流行的前端UI库，它提供了丰富的组件，包括Table表格。要使用iView的Table创建竖向显示的表格，你需要设置`direction`属性为`"vertical"`。以下是一个基本步骤：

1. 首先，确保已经安装了iView库并引入了相关的CSS和JS文件。

<link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
<script src="https://unpkg.com/iview/dist/iview.min.js"></script>

2. 创建一个Table元素，并设置其方向为垂直：

<template>
  <Table :data="tableData" direction="vertical">
    <!-- 表头 -->
    <TableHeader slot-scope="scope">
      <tr v-for="(headerItem, index) in scope.columns">
        <th>{{ headerItem.label }}</th>
      </tr>
    </TableHeader>

    <!-- 表体 -->
    <TableBody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td v-for="(cellItem, cellIndex) in item" :key="cellIndex">{{ cellItem }}</td>
      </tr>
    </TableBody>
  </Table>
</template>

3. 定义数据`tableData`，这是表格的数据源，包含行和列的数据。例如：

export default {
  data() {
    return {
      tableData: [
        // 竖向数组结构，每一项代表一行
        { column1Value: '值1', column2Value: '值2' },
        { column1Value: '值3', column2Value: '值4' },
        // ...更多行
      ]
    };
  }
}