vue实现横向表格

实现横向表格的方法

在Vue中实现横向表格可以通过多种方式完成，以下是几种常见的实现方法：

使用原生HTML表格 通过调整CSS样式实现横向排列，将表头和数据行进行转置。

<template>
  <div class="horizontal-table">
    <table>
      <tr v-for="(row, index) in transposedData" :key="index">
        <th>{{ row.header }}</th>
        <td v-for="(cell, cellIndex) in row.cells" :key="cellIndex">{{ cell }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, city: 'New York' },
        { name: 'Jane', age: 30, city: 'London' }
      ]
    }
  },
  computed: {
    transposedData() {
      const headers = Object.keys(this.tableData[0])
      return headers.map(header => ({
        header,
        cells: this.tableData.map(item => item[header])
      }))
    }
  }
}
</script>

<style>
.horizontal-table table {
  border-collapse: collapse;
}
.horizontal-table th,
.horizontal-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>

使用CSS Flexbox布局 通过Flexbox实现更灵活的横向表格布局。

<template>
  <div class="flex-table">
    <div class="row" v-for="(row, index) in transposedData" :key="index">
      <div class="cell header">{{ row.header }}</div>
      <div class="cell" v-for="(cell, cellIndex) in row.cells" :key="cellIndex">{{ cell }}</div>
    </div>
  </div>
</template>

<style>
.flex-table {
  display: flex;
  flex-direction: column;
}
.flex-table .row {
  display: flex;
  border-bottom: 1px solid #eee;
}
.flex-table .cell {
  padding: 8px;
  flex: 1;
  border-right: 1px solid #eee;
}
.flex-table .header {
  font-weight: bold;
  background-color: #f5f5f5;
}
</style>

使用第三方组件库 Element UI或Ant Design Vue等UI库提供了现成的表格组件，可以通过配置实现横向显示。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :show-header="false"
    :row-class-name="tableRowClassName">
    <el-table-column
      v-for="(value, key) in tableData[0]"
      :key="key"
      :prop="key"
      :label="key">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    tableRowClassName({rowIndex}) {
      return rowIndex === 0 ? 'header-row' : ''
    }
  }
}
</script>

<style>
.el-table .header-row {
  font-weight: bold;
  background-color: #f5f5f5;
}
</style>

横向表格的注意事项

确保横向表格在小屏幕设备上也能正常显示，可能需要添加水平滚动功能。

.horizontal-scroll {
  overflow-x: auto;
  white-space: nowrap;
}

考虑使用响应式设计，在不同屏幕尺寸下自动调整布局方式。对于大量数据，建议实现虚拟滚动以提高性能。