当前位置：首页 > VUE

vue横纵表格实现

2026-01-20 17:46:08VUE

Vue 横纵表格实现

在 Vue 中实现横纵表格（也称为交叉表格或矩阵表格）通常涉及动态渲染行和列，结合嵌套循环和数据结构处理。以下是几种常见实现方式：

使用嵌套 v-for 循环

通过嵌套 v-for 循环动态渲染行和列，适用于静态或简单动态数据。

<template>
  <table>
    <thead>
      <tr>
        <th>行/列</th>
        <th v-for="col in columns" :key="col">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row">
        <td>{{ row }}</td>
        <td v-for="col in columns" :key="col">
          {{ getCellValue(row, col) }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      rows: ['行1', '行2', '行3'],
      columns: ['列A', '列B', '列C'],
      data: {
        '行1': { '列A': '值1A', '列B': '值1B', '列C': '值1C' },
        '行2': { '列A': '值2A', '列B': '值2B', '列C': '值2C' },
        '行3': { '列A': '值3A', '列B': '值3B', '列C': '值3C' }
      }
    };
  },
  methods: {
    getCellValue(row, col) {
      return this.data[row][col];
    }
  }
};
</script>

动态生成表头与表体

适用于动态数据源，表头和表体均从后端或动态配置中获取。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in tableData" :key="index">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['名称', '年龄', '城市'],
      tableData: [
        ['张三', 25, '北京'],
        ['李四', 30, '上海'],
        ['王五', 28, '广州']
      ]
    };
  }
};
</script>

使用第三方组件库

对于复杂需求，可以借助第三方表格组件库（如 Element UI、Ant Design Vue）快速实现。

以 Element UI 为例：

<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="city" label="城市"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' },
        { name: '王五', age: 28, city: '广州' }
      ]
    };
  }
};
</script>

处理动态表头与复杂数据

当表头和行数据需要动态生成且结构复杂时，可通过计算属性或方法处理数据。

vue横纵表格实现

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in dynamicHeaders" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in processedData" :key="index">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      rawData: [
        { id: 1, name: '张三', details: { age: 25, city: '北京' } },
        { id: 2, name: '李四', details: { age: 30, city: '上海' } }
      ]
    };
  },
  computed: {
    dynamicHeaders() {
      return ['ID', '姓名', '年龄', '城市'];
    },
    processedData() {
      return this.rawData.map(item => [
        item.id,
        item.name,
        item.details.age,
        item.details.city
      ]);
    }
  }
};
</script>