当前位置：首页 > VUE

vue实现多维表格

2026-03-10 10:07:43VUE

Vue 实现多维表格的方法

多维表格（如类似 Excel 的数据表）在 Vue 中可以通过多种方式实现，以下是几种常见方法：

使用原生 HTML 表格结合 Vue 数据绑定

通过 v-for 动态渲染行列数据，适合基础需求：

<template>
  <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td v-for="(cell, colIndex) in row" :key="colIndex">
        <input v-model="tableData[rowIndex][colIndex]" />
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2']
      ]
    }
  }
}
</script>

使用第三方表格库

对于复杂功能（排序、合并单元格等），推荐使用专业库：

vue实现多维表格

VxeTable：支持多维表格、虚拟滚动

npm install xe-utils vxe-table

<template>
  <vxe-table :data="tableData" border>
    <vxe-column v-for="col in columns" :key="col.field" :field="col.field" :title="col.title"></vxe-column>
  </vxe-table>
</template>

Handsontable：Excel 风格的交互

vue实现多维表格

npm install handsontable @handsontable/vue

实现可编辑单元格

通过自定义组件实现双击编辑：

<template>
  <td @dblclick="isEditing = true">
    <input v-if="isEditing" v-model="value" @blur="save"/>
    <span v-else>{{ value }}</span>
  </td>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return { isEditing: false }
  },
  methods: {
    save() {
      this.isEditing = false
      this.$emit('input', this.value)
    }
  }
}
</script>

动态行列处理

通过计算属性实现动态行列生成：

computed: {
  columns() {
    return Array.from({length: this.colCount}, (_, i) => ({
      field: `col${i}`,
      title: `Column ${i+1}`
    }))
  }
}