当前位置：首页 > VUE

vue实现handsontable

2026-01-12 19:34:15VUE

安装依赖

在Vue项目中安装handsontable和@handsontable/vue包：

npm install handsontable @handsontable/vue

引入组件

在Vue组件中引入HotTable组件和Handsontable样式：

import { HotTable } from '@handsontable/vue';
import 'handsontable/dist/handsontable.full.css';

注册组件

在Vue组件的components选项中注册HotTable：

components: {
  HotTable
}

基本使用

在模板中使用HotTable组件并绑定数据：

<hot-table :data="tableData" :colHeaders="true" :rowHeaders="true"></hot-table>

在脚本中定义表格数据：

data() {
  return {
    tableData: [
      ['A1', 'B1', 'C1'],
      ['A2', 'B2', 'C2'],
      ['A3', 'B3', 'C3']
    ]
  }
}

配置选项

可以通过settings属性传递更多配置选项：

<hot-table 
  :data="tableData" 
  :settings="hotSettings"
></hot-table>

data() {
  return {
    hotSettings: {
      colHeaders: ['姓名', '年龄', '城市'],
      columns: [
        { data: 'name' },
        { data: 'age', type: 'numeric' },
        { data: 'city' }
      ],
      data: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' }
      ]
    }
  }
}

事件处理

可以监听Handsontable的各种事件：

vue实现handsontable

<hot-table 
  :settings="hotSettings"
  @after-change="handleChange"
></hot-table>

methods: {
  handleChange(changes, source) {
    console.log('表格数据变化:', changes);
  }
}

完整示例

<template>
  <div>
    <hot-table 
      :data="tableData" 
      :colHeaders="true" 
      :rowHeaders="true"
      :settings="hotSettings"
      @after-change="handleChange"
    ></hot-table>
  </div>
</template>

<script>
import { HotTable } from '@handsontable/vue';
import 'handsontable/dist/handsontable.full.css';

export default {
  components: {
    HotTable
  },
  data() {
    return {
      tableData: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2'],
        ['A3', 'B3', 'C3']
      ],
      hotSettings: {
        colHeaders: ['姓名', '年龄', '城市'],
        columns: [
          { data: 'name' },
          { data: 'age', type: 'numeric' },
          { data: 'city' }
        ],
        data: [
          { name: '张三', age: 25, city: '北京' },
          { name: '李四', age: 30, city: '上海' }
        ]
      }
    }
  },
  methods: {
    handleChange(changes, source) {
      console.log('表格数据变化:', changes);
    }
  }
}
</script>