版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39921345/article/details/80764329
在百度上搜了很多关于这个插件的使用方法，有一个写的很详细的！本来已经很详细了，我再添点自己的内容。（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（）。能获取实时改变的表单值。在方法中拿到值。（不会怎么解释，直接上图_(:з」∠)_）
扫描二维码关注公众号，回复：
3278027 查看本文章
下面的afterChange方法，详情见handsontable的文档。
4.一切数据准备OK，这个时候，突然发现。如果表头数据太多，页面就特别宽，滚动条会带着整个页面滑动，就像这样，
这个时候，我是懵逼的。宽度怎么设置都不起作用。（为此，我还跑到git上提交了issue = =，最后还是自己搞定了）。其实这不算是这个插件的问题，但是我为此也纠结了很久。所以记录一下，这种超出的部分要overflow：auto，只需要给这个盒子本身，再套一个盒子。
第一层overflow：hidden；第二层overflow：auto。
就可以在当前页面滑动了，对了，一定要给第一层盒子定高度！不然表格根本不会出来。（定高虽然丑了点，但是总比整个页面滑动好看多了。(#^.^#)）
最后附上我的demo的全部代码，不包括上传数据的版本（上传数据的版本是公司代码，就不发了，不懂的可以问我）
<template>
<section>
<h3>看我动没有动</h3>
<div class="overf">
<div id="example-container" class="wrapper">
<HotTable :root="test" :settings="hotSettings"></HotTable>
</div>
</div>
<div>
<button disabled="disabled">1</button>
<button disabled="disabled">2</button>
</div>
</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: [
"所属机构",
"检测时间",
"工号",
"姓名",
"手机号",
"性别",
"出生日期",
"结论",
"检测类型",
"血糖(mmol/L)",
"脉率(bpm)",
"血氧饱和度(%)",
"舒张压(mmHg)",
"收缩压(mmHg)",
"心率(bpm)",
"身高(cm)",
"体重(kg)",
"BMI",
"体温(℃)",
"总胆固醇（mmol/L）",
"药品1",
"药品种类",
"每日服用次数",
"每次服用剂量"
], //自定义列表头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: [
//添加每一列的数据类型和一些配置
{},
{},
{},
{},
{ type: "numeric" }, //数值
{
type: "dropdown",
source: ["男", "女"],
strict: false
},
{
type: "date", //时间格式
dateFormat: "YYYYMMDD",
correctFormat: true,
defaultDate: "19000101"
},
{},
{
type: "dropdown", //下拉选择
source: [
"空腹血糖",
"早餐2+小时血糖",
"午餐2+小时血糖",
"晚餐2+小时血糖"
],
strict: false //是否严格匹配
},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
// 药品
{ readOnly: true },
{
type: "dropdown",
source: [
"血压-利尿剂",
"血压-β受体阻滞剂",
"血压-钙通道拮抗剂(CCB)",
"血压-血管紧张素抑制剂(ACEI)",
"血压-血管紧张素二受体阻滞剂(ARB)",
"血糖-双胍类药物（二甲双胍）",
"血糖-磺脲类药物（格列美脲、格列齐特）",
"血糖-噻唑烷二酮类药物（罗格列酮、吡格列酮）",
"血糖-格列奈类药物（瑞格列耐、那格列耐）",
"血糖-Ɑ糖苷酶抑制剂（阿卡波糖、伏格列波糖）",
"血糖-DPP4抑制剂（沙格列汀、维格列汀）",
"血糖-SGLT2抑制剂（达格列净）",
"降血脂药物"
],
strict: false
},
{
type: "dropdown",
source: ["1次", "2次", "3次", "4次"],
strict: false
},
{},
],
manualColumnFreeze: true, //手动固定列
manualColumnMove: true, //手动移动列
manualRowMove: true, //手动移动行
manualColumnResize: true, //手工更改列距
manualRowResize: true, //手动更改行距
customBorders: [], //添加边框
columnSorting: true, //排序
stretchH: "all" //根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
}
};
},
name: "SampleApp",
components: {
HotTable
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
section{
width: 100%;
height: 100%;
overflow: hidden;
}
.overf{
width: 100%;
height: 100px;
overflow: hidden;
}
#example-container{
overflow: auto;
width: 100%;
height: 100%;
}
h3{
width: 100%;
background-color: burlywood;
}
button {
margin: 20px 20px;
}
.handsontable .currentRow {
background-color: #b6bada;
}
.handsontable .currentCol {
background-color: #d1dfd7;
}
</style>最后希望能提供给大家一点帮助！