在百度上搜了很多关于这个插件的使用方法，有一个写的很详细的！本来已经很详细了，我再添点自己的内容。（ps:英语不好，面向百度编程_(:з」∠)_）：
1.安装好之后就直接报错2个：
第一个是es-2015没有模块，所以需要在我们的根目录文件
npm install babel-preset-es2015 --save-dev 如果是用脚手架搭的架子，webpack的配置文件不需要再次更改。
第二个是vue-handsontable-official中的HotTable.vue找不到
handsontable/dist/handsontable.full.css
这是因为它本身引用的路径有问题，只需要改成
@import
"../../handsontable/dist/handsontable.full.css"
;
解决这2个问题，程序跑起来就没有问题了。
2.ctrl+z的bug
因为插件本身有一个ctrl+z 撤销有bug的问题，解决的办法是加一列，这样能撤销当前单元格的事件，但是不能撤销一次行为！
3.当需要提交数据给后台的时候，需要注意几点：
A.获取表格数据的时候，使用 getSourceData（）这个函数，而不是getData（）；当然，用这个函数的好处是传输数据的时候，能取到自己设置的Key的字段，而不是 “ 0:excelDetectDate”这种key值为数字的值。
设置属性值为这个key值字段，需要在columns中添加一个data属性。
columns: [
//添加每一列的数据类型和一些配置
{ data: "subordindateUnit" },
B.在data()中监听afterChange（）。能获取实时改变的表单值。在方法中拿到值。（不会怎么解释，直接上图_(:з」∠)_）
下面的afterChange方法，详情见handsontable的文档。
4.一切数据准备OK，这个时候，突然发现。如果表头数据太多，页面就特别宽，滚动条会带着整个页面滑动，就像这样，
这个时候，我是懵逼的。宽度怎么设置都不起作用。（为此，我还跑到git上提交了issue = =，最后还是自己搞定了）。其实这不算是这个插件的问题，但是我为此也纠结了很久。所以记录一下，这种超出的部分要overflow：auto，只需要给这个盒子本身，再套一个盒子。
第一层overflow：hidden；第二层overflow：auto。
就可以在当前页面滑动了，对了，一定要给第一层盒子定高度！不然表格根本不会出来。（定高虽然丑了点，但是总比整个页面滑动好看多了。(#^.^#)）
最后附上我的demo的全部代码，不包括上传数据的版本（上传数据的版本是公司代码，就不发了，不懂的可以问我）
<template>
<section>
<div class="overf">
<div id="example-container" class="wrapper">
<HotTable :root='test' ref='textHot' :settings="hotSettings"></HotTable>
<button @click='submit'>提交</button>
<button disabled="disabled" >重置</button>
</section>
</template>
<script>
import HotTable from "vue-handsontable-official";
import 'handsontable/languages/zh-CN';
import Vue from "vue";
export default {
data: function() {
return {
test: "test-hot",
hotSettings: {
data:[], // 数据在这个里面,由数据填充表
startRows: 10, //初始行列数
startCols: 35,
minRows: 1, //最小行列
minCols: 1,
rowHeaders: true, //行表头
colHeaders: [
"所属机构",
"检测时间",
"工号",
"姓名",
"手机号",
"性别",
"出生日期"
], //自定义列表头or 布尔值
minSpareCols: 1, //列留白
// minSpareRows: 2, //行留白
className: "htCenter",
currentRowClassName: "currentRow", //为选中行添加类名，可以更改样式
currentColClassName: "currentCol", //为选中列添加类名
autoWrapRow: true, //自动换行
language:'zh-CN',
contextMenu: [
"row_above",
"row_below",
"col_left",
"col_right",
"---------",
"remove_row",
"remove_col",
"---------",
"alignment",
'make_read_only',
"borders",
"copy",
"cut"
//右键效果
fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"
fixedColumnsLeft: 0, //固定左边列数
fixedRowsTop: 1, //固定上边行数
columns: [
//添加每一列的数据类型和一些配置
{data: 'subordindateUnit'}, // data后面跟的这个字段是上传对应的字段
data: "excelDetectTime",
type: "time",
timeFormat: "h:mm:ss a",
correctFormat: true
{data: 'jobNumber'},
{data: 'name'},
data: 'phone',
type: "numeric"
}, //数值
data: 'excelGender',
type: "dropdown",
source: ["男", "女"],
strict: false
data: 'excelBirthday',
type: "date", //时间格式
dateFormat: "YYYY-MM-DD",
correctFormat: true,
defaultDate: "1960-01-01"
afterChange: function (changes, source) {
this.updatePlayerList = this.getSourceData()
if(changes){
changes.forEach(([row,prop,oldValue,newValue]) => {
// 正则判断
let phoneReg = /^1(3|4|5|7|8)\d{9}$/
if(prop == 'phone'){ //phone是我需要判断的字段
if( phoneReg.test(newValue)){
console.log(true);
} else{
console.log(false);
updatePlayerList: null
name: "SampleApp",
components: {
HotTable
methods:{
getSourceData: function () {
return this.$refs.textHot.table.getSourceData()
submit: function () {
console.log(this.getSourceData());
</script>
<style>
margin: 0;
padding: 0;
section{
width: 100%;
height: 100%;
overflow: hidden;
.overf{
width: 50%;
height: 100px;
/* height: 100%; */
overflow: hidden;
#example-container{
overflow: auto;
width: 100%;
height: 100%;
width: 100%;
background-color: burlywood;
button {
margin: 20px 20px;
.handsontable .currentRow {
background-color: #b6bada;
.handsontable .currentCol {
background-color: #d1dfd7;
</style>
11.21日更新：
最近需求改了，需要自己加入正则判断某个数据，四处提问，终于写出来了。这里用到之前说的afterChange事件。
afterChange: function (changes, source) {
this.updatePlayerList = this.getSourceData()
if(changes){
changes.forEach(([row,prop,oldValue,newValue]) => {
// 正则判断
let phoneReg = /^1(3|4|5|7|8)\d{9}$/
if(prop == 'phone'){ //phone是我需要判断的字段
if( phoneReg.test(newValue)){
console.log(true);
} else{
console.log(false);
最后希望能提供给大家一点帮助！
在百度上搜了很多关于这个插件的使用方法，有一个写的很详细的！本来已经很详细了，我再添点自己的内容。（ps:英语不好，面向百度编程_(:з」∠)_）： 1.安装好之后就直接报错2个：第一个是es-2015没有模块，所以需要在我们的根目录文件npm install babel-preset-es2015 --save-dev 如果是用脚手架搭的架子，webpack的配置文件不需要再次更改。...
npm install handsontable @handsontable/vue
您也可以直接从加载它。
< script src =" https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/
需求： 页面中表格要做成可编辑功能，要求在页面中可以像在Excel表格中一样可进行复制、粘贴、添加、删除等操作，可以将Excel表格中的内容通过一次复制就能全部粘贴到页面表格中。
Handsontable介绍： Handsontable是一个具有电子表格功能和外观的数据网格。Handsontable是用JavaScript编写的，适用于最流行的框架，如Angular，Vue和React。可以使用自定义插件轻松修改或扩展它。它使用JSON格式绑定到任何数据源并处理大量记录。它支持过滤，排序和CRUD （创建
这是
Vue的
Handsontable数据网格的官方包装。
它提供了数据绑定，数据验证，过滤，排序等功能。
安装U这是
Vue的
Handsontable数据网格的官方包装。
它提供了数据绑定，数据验证，过滤，排序等功能。
安装
使用npm与
Handsontable一起安装此包装器。
npm install
handsontable @
handsontable /
vue您也可以直接从
jsDelivr加载它。
今天在vue3的练习时候发现我写的路由总是浏览器报错，仔细校验文档发现并没有错误啊，可总是报Uncaught TypeError:Object(…) is not a function的错误，看下图：
网上针对这个错误的解释都是重名啊、大小写错误啥的。很显然对于我这种老鸟（菜鸡）是不可能犯这种错误的。经过一顿折腾竟然是版本问题。。。。。。。。。。。
我查看了路由的版本号，3.5.1并不是最新的，理论上讲应该问题不大，但是还是抱着试一试的心态把vue相关的都升级了一遍，再次编译，竟然没有这个问题了。真不知道这
公式的计算可
使用堆栈的思想将运算符后置，如：C1=(A1+A2)*5+B1可以变换成：[A1,A2+5*B1]
计算过程为，假设A1=1,A2=2,B1=3
C1=(A1+A2)*5+B1
[A1,A2+5*B1]
[1,2,+,5*,3,+]
[3,5*,3+]
[15,3+]
这样即可计算出最终答案C1=18
当计算公式中值发生变化时处理方法
前面提到过自...
