当前位置：首页 > VUE

vue实现多维表格

2026-02-18 20:47:49VUE

Vue 实现多维表格的方法

使用 el-table 组件

Element UI 的 el-table 组件支持多级表头，可以通过嵌套 columns 实现多维表格。以下是一个示例代码：

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="成绩">
      <el-table-column prop="math" label="数学"></el-table-column>
      <el-table-column prop="english" label="英语"></el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', math: 90, english: 80 },
        { name: '李四', math: 85, english: 90 }
      ]
    }
  }
}
</script>

动态生成多维表头

对于更复杂的多维表格，可以动态生成表头配置：

vue实现多维表格

<template>
  <el-table :data="tableData" border>
    <el-table-column 
      v-for="col in columns" 
      :key="col.prop"
      :prop="col.prop" 
      :label="col.label">
      <el-table-column 
        v-if="col.children"
        v-for="child in col.children"
        :key="child.prop"
        :prop="child.prop"
        :label="child.label">
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'name', label: '姓名' },
        { 
          label: '成绩', 
          children: [
            { prop: 'math', label: '数学' },
            { prop: 'english', label: '英语' }
          ]
        }
      ],
      tableData: [
        { name: '张三', math: 90, english: 80 },
        { name: '李四', math: 85, english: 90 }
      ]
    }
  }
}
</script>

使用第三方库

对于更高级的多维表格需求，可以考虑使用专门的数据表格库：

vue实现多维表格

Handsontable：支持 Excel 类似的多维表格功能
ag-Grid：企业级表格解决方案，支持复杂多维数据展示
VxeTable：基于 Vue 的表格组件，支持多级表头

自定义渲染

对于完全自定义的多维表格，可以使用 v-for 嵌套循环实现：

<template>
  <table class="multi-table">
    <thead>
      <tr>
        <th rowspan="2">姓名</th>
        <th colspan="2">成绩</th>
      </tr>
      <tr>
        <th>数学</th>
        <th>英语</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.math }}</td>
        <td>{{ item.english }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', math: 90, english: 80 },
        { name: '李四', math: 85, english: 90 }
      ]
    }
  }
}
</script>

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