vue实现垂直表格

实现垂直表格的基本思路

在Vue中实现垂直表格（即表头在左侧，数据向右展开的布局），可以通过调整HTML结构和CSS样式来实现。垂直表格常用于对比数据或展示属性-值对。

HTML结构设计

使用Vue的模板语法创建基础结构，通过v-for循环渲染数据：

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

CSS样式设置

通过Flex布局实现垂直表格的排列，确保表头固定在左侧：

.vertical-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
}

.row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.header-cell {
  flex: 0 0 150px;
  padding: 8px;
  background-color: #f5f5f5;
  font-weight: bold;
  border-right: 1px solid #ddd;
}

.data-cell {
  flex: 1;
  padding: 8px;
}

Vue数据定义

在Vue组件的data中定义表格数据，结构需包含表头和数据数组：

export default {
  data() {
    return {
      tableData: [
        { header: '姓名', data: ['张三', '李四', '王五'] },
        { header: '年龄', data: [25, 30, 28] },
        { header: '职业', data: ['工程师', '设计师', '产品经理'] }
      ]
    }
  }
}

动态数据绑定

若需从API获取数据，可在mounted或created钩子中异步加载：

export default {
  data() {
    return {
      tableData: []
    }
  },
  async mounted() {
    const response = await fetch('/api/vertical-table-data');
    this.tableData = await response.json();
  }
}

响应式布局优化

添加媒体查询确保在小屏幕下的显示效果：

@media (max-width: 768px) {
  .header-cell {
    flex: 0 0 100px;
  }
}

添加交互功能

通过Vue方法实现行高亮或点击事件：

<div class="row" 
     v-for="(row, index) in tableData" 
     :key="index"
     @click="handleRowClick(row)"
     :class="{ 'active-row': activeRow === index }">
</div>

methods: {
  handleRowClick(row) {
    console.log('Clicked row:', row);
    this.activeRow = index;
  }
}

完整组件示例

整合以上代码的完整单文件组件示例：

<template>
  <div class="vertical-table">
    <div class="row" 
         v-for="(row, index) in tableData" 
         :key="index"
         @click="handleRowClick(index)"
         :class="{ 'active-row': activeRow === index }">
      <div class="header-cell">{{ row.header }}</div>
      <div class="data-cell" v-for="(cell, cellIndex) in row.data" :key="cellIndex">
        {{ cell }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeRow: null,
      tableData: [
        { header: '姓名', data: ['张三', '李四', '王五'] },
        { header: '年龄', data: [25, 30, 28] },
        { header: '职业', data: ['工程师', '设计师', '产品经理'] }
      ]
    }
  },
  methods: {
    handleRowClick(index) {
      this.activeRow = index;
    }
  }
}
</script>

<style scoped>
.vertical-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
}
.row {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.header-cell {
  flex: 0 0 150px;
  padding: 8px;
  background-color: #f5f5f5;
  font-weight: bold;
  border-right: 1px solid #ddd;
}
.data-cell {
  flex: 1;
  padding: 8px;
}
.active-row {
  background-color: #e6f7ff;
}
@media (max-width: 768px) {
  .header-cell {
    flex: 0 0 100px;
  }
}
</style>