vue实现纵向渲染表格

实现纵向渲染表格的方法

在Vue中实现纵向渲染表格，通常需要调整数据结构或自定义表格的渲染方式。以下是几种常见的方法：

使用v-for指令渲染纵向表格

通过调整数据结构和v-for指令的嵌套方式，可以实现纵向渲染。假设数据是一个对象数组，每个对象代表一行数据。

<template>
  <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td v-for="(value, key) in row" :key="key">{{ value }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, gender: '男' },
        { name: '李四', age: 30, gender: '女' },
        { name: '王五', age: 28, gender: '男' }
      ]
    }
  }
}
</script>

转置数据实现纵向显示

如果需要将横向数据转为纵向显示，可以先对数据进行转置处理。

<template>
  <table>
    <tr v-for="(value, key) in transposedData" :key="key">
      <th>{{ key }}</th>
      <td v-for="(item, index) in value" :key="index">{{ item }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      originalData: [
        { name: '张三', age: 25, gender: '男' },
        { name: '李四', age: 30, gender: '女' },
        { name: '王五', age: 28, gender: '男' }
      ]
    }
  },
  computed: {
    transposedData() {
      const result = {}
      this.originalData.forEach((item, index) => {
        Object.keys(item).forEach(key => {
          if (!result[key]) {
            result[key] = []
          }
          result[key].push(item[key])
        })
      })
      return result
    }
  }
}
</script>

使用CSS实现纵向布局

通过CSS的writing-mode属性可以实现文字的纵向排列，但这种方法更适合单个单元格内容的纵向显示。

<template>
  <table>
    <tr>
      <td class="vertical-text">纵向内容</td>
    </tr>
  </table>
</template>

<style>
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
</style>

使用第三方表格组件

对于更复杂的需求，可以考虑使用专门的表格组件库，如Element UI的Table组件或VxeTable，它们通常提供更灵活的布局配置选项。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, gender: '男' },
        { name: '李四', age: 30, gender: '女' },
        { name: '王五', age: 28, gender: '男' }
      ]
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，数据转置的方法适合需要将横向数据显示为纵向的场景，而CSS方法适合单个单元格内容的纵向排列。第三方组件则提供了更丰富的功能和配置选项。