handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯栋烤，復(fù)制粘貼断部，插入刪除行列，排序等復(fù)雜操作班缎。擁有jQuery蝴光、react、ng和vue版本达址，功能強大蔑祟，是復(fù)雜表格的不二之選。
下面介紹一下handsontable表格控件在vue項目中的使用方法：
1.安裝模塊包
npm install handsontable-pro @handsontable-pro/vue
npm install handsontable @handsontable/vue
這樣安裝完handsontable依賴的各模塊（moment沉唠、numbro疆虚、pikaday 、zeroclipboard）也一起安裝完了，不必再單獨安裝
頁面如果使用相關(guān)的模塊方法径簿，可以直接import引入罢屈，例如使用moment中的格式化時間方法:
import moment from "moment"
formatTime(time){
return moment(time).format('YYYY-MM-DD HH:mm:ss')
}
formatTime(new Date())
- 引入模塊包
import { HotTable } from '@handsontable-pro/vue'
import '../../node_modules/handsontable-pro/dist/handsontable.full.css'
import Handsontable from 'handsontable-pro'
- 引入組件
<template>
<div>
<div id="hotTable" class="hotTable">
<HotTable ref="testHot" :settings="hotSettings"></HotTable>
</div>
</div>
</template>
- api參數(shù)說明
export default {
data: function () {
return {
root: 'test-hot',
hotSettings: {
data: [ //數(shù)據(jù)可以是二維數(shù)組，也可以是數(shù)組對象
['20080101', 10, 11, 12, 13,true],
['20090101', 20, 11, 14, 13,true],
['20010101', 30, 15, 12, 13,true],
['20010101', 32, 213, 21, 312,true],
['20010201', 32, 213, 21, 312,true],
['20010301', 32, 213, 21, 312,true],
['20010401', 32, 213, 21, 312,true],
['20010501', 32, 213, 21, 312,true],
['20010601', 32, 213, 21, 312,true]
],
startRows: 11,//行列范圍
startCols: 6,
minRows: 5, //最小行列
minCols: 5,
maxRows: 20, //最大行列
maxCols: 20,
rowHeaders: true,//行表頭篇亭，可以使布爾值（行序號）缠捌，可以使字符串（左側(cè)行表頭相同顯示內(nèi)容，可以解析html）译蒂，也可以是數(shù)組（左側(cè)行表頭單獨顯示內(nèi)容）曼月。
colHeaders: [ '題目', 'A選項', 'B選項', 'C選項', 'D選項','答案'],//自定義列表頭or 布爾值
minSpareCols: 2, //列留白
minSpareRows: 2,//行留白
currentRowClassName: 'currentRow', //為選中行添加類名，可以更改樣式
currentColClassName: 'currentCol',//為選中列添加類名
autoWrapRow: true, //自動換行
contextMenu: { //自定義右鍵菜單柔昼，可漢化哑芹，默認(rèn)布爾值
items: {
"row_above": {
name:'上方插入一行'
},
"row_below": {
name:'下方插入一行'
},
"col_left": {
name:'左方插入列'
},
"col_right": {
name:'右方插入列'
},
"hsep1": "---------", //提供分隔線
"remove_row": {
name: '刪除行',
},
"remove_col": {
name: '刪除列',
},
"make_read_only": {
name: '只讀',
},
"borders": {
name: '表格線',
},
"commentsAddEdit": {
name: '添加備注',
},
"commentsRemove": {
name: '取消備注',
},
"freeze_column": {
name: '固定列',
},
"unfreeze_column": {
name: '取消列固定',
},
"hsep2": "---------",
}
},//右鍵效果
fillHandle: true, //選中拖拽復(fù)制 possible values: true, false, "horizontal", "vertical"
fixedColumnsLeft: 0,//固定左邊列數(shù)
fixedRowsTop: 0,//固定上邊列數(shù)
mergeCells: [ //合并
{row: 1, col: 1, rowspan: 3, colspan: 3}, //指定合并，從（1,1）開始行3列3合并成一格
{row: 3, col: 4, rowspan: 2, colspan: 2}
],
columns: [ //添加每一列的數(shù)據(jù)類型和一些配置
{
//data: 'title', 此設(shè)置標(biāo)識捕透，數(shù)組對象數(shù)據(jù)格式時的列字段
type: 'date', //時間格式
dateFormat: 'YYYYMMDD',
correctFormat: true,
defaultDate: '19000101'
},
{
type: 'dropdown', //下拉選擇
source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
strict: false //是否嚴(yán)格匹配
},
{type: 'numeric'}, //數(shù)值
{type: 'numeric',
readOnly: true //設(shè)置只讀
},
{ type: 'numeric',
format: '$ 0,0.00'}, //指定的數(shù)據(jù)格式
{type: 'checkbox'}, //多選框
],
afterChange: function (changes, source) { //數(shù)據(jù)改變時觸發(fā)此方法
console.log(this.getData())聪姿；
},
manualColumnFreeze: true, //手動固定列
manualColumnMove: true, //手動移動列
manualRowMove: true, //手動移動行
manualColumnResize: true,//手工更改列距
manualRowResize: true,//手動更改行距
comments: true, //添加注釋
cell: [
{row: 1, col: 1, comment: {value: 'this is test'}},
],
customBorders:[],//添加邊框
columnSorting: true,//排序
stretchH: 'all',//根據(jù)寬度橫向擴展，last:只擴展最后一列乙嘀，none：默認(rèn)不擴展
}
};
},
name: 'handsonTable',
components: {
HotTable
},
methods: {
saveData (){
var examData = this.$refs.testHot.table.getData(); //這里要注意末购，如果使用this.hotSettings.data 保存表格數(shù)據(jù)，拖拽完以后數(shù)據(jù)的順序?qū)⒉粫缕固桑虼耸褂?this.$refs.testHot.table.getData(); 來獲取數(shù)據(jù)招盲，獲取的數(shù)據(jù)格式為二維數(shù)組低缩。
console.log(examData );
}
}
}
- 完整示例
import { HotTable } from '@handsontable-pro/vue'
import '../../node_modules/handsontable-pro/dist/handsontable.full.css'
import Handsontable from 'handsontable-pro'
<template>
<div>
<div id="hotTable" class="hotTable">
<HotTable :root="root" ref="testHot" :settings="hotSettings"></HotTable>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
root: 'test-hot',
hotSettings: {
data: [ //數(shù)據(jù)可以是二維數(shù)組嘉冒，也可以是數(shù)組對象
['20080101', 10, 11, 12, 13,true],
['20090101', 20, 11, 14, 13,true],
['20010101', 30, 15, 12, 13,true],
['20010101', 32, 213, 21, 312,true],
['20010201', 32, 213, 21, 312,true],
['20010301', 32, 213, 21, 312,true],
['20010401', 32, 213, 21, 312,true],
['20010501', 32, 213, 21, 312,true],
['20010601', 32, 213, 21, 312,true]
],
startRows: 11,//行列范圍
startCols: 6,
minRows: 5, //最小行列
minCols: 5,
maxRows: 20, //最大行列
maxCols: 20,
rowHeaders: true,//行表頭，可以使布爾值（行序號）咆繁，可以使字符串（左側(cè)行表頭相同顯示內(nèi)容讳推，可以解析html），也可以是數(shù)組（左側(cè)行表頭單獨顯示內(nèi)容）玩般。
colHeaders: [ '題目', 'A選項', 'B選項', 'C選項', 'D選項','答案'],//自定義列表頭or 布爾值
minSpareCols: 2, //列留白
minSpareRows: 2,//行留白
currentRowClassName: 'currentRow', //為選中行添加類名银觅，可以更改樣式
currentColClassName: 'currentCol',//為選中列添加類名
autoWrapRow: true, //自動換行
contextMenu: { //自定義右鍵菜單，可漢化坏为，默認(rèn)布爾值
items: {
"row_above": {
name:'上方插入一行'
},
"row_below": {
name:'下方插入一行'
},
"col_left": {
name:'左方插入列'
},
"col_right": {
name:'右方插入列'
},
"hsep1": "---------", //提供分隔線
"remove_row": {
name: '刪除行',
},
"remove_col": {
name: '刪除列',
},
"make_read_only": {
name: '只讀',
},
{ type: 'numeric',
format: '$ 0,0.00'}, //指定的數(shù)據(jù)格式
{type: 'checkbox'}, //多選框
],
afterChange: function (changes, source) { //數(shù)據(jù)改變時觸發(fā)此方法
console.log(this.getData())究驴；
},
manualColumnFreeze: true, //手動固定列
manualColumnMove: true, //手動移動列
manualRowMove: true, //手動移動行
manualColumnResize: true,//手工更改列距
manualRowResize: true,//手動更改行距
comments: true, //添加注釋
cell: [
{row: 1, col: 1, comment: {value: 'this is test'}},
],
customBorders:[],//添加邊框
columnSorting: true,//排序
stretchH: 'all',//根據(jù)寬度橫向擴展，last:只擴展最后一列匀伏，none：默認(rèn)不擴展
}
};
},
name: 'handsonTable',
components: {
HotTable
},
methods: {
saveData (){
var examData = this.$refs.testHot.table.getData(); //這里要注意洒忧，如果使用this.hotSettings.data 保存表格數(shù)據(jù)，拖拽完以后數(shù)據(jù)的順序?qū)⒉粫鹿坏撸虼耸褂?this.$refs.testHot.table.getData(); 來獲取數(shù)據(jù)熙侍，獲取的數(shù)據(jù)格式為二維數(shù)組。
console.log(examData );
}
}
}
</script>
- handsontable 插件事件api
1）afterChange (changes: Array, source: String)：1個或多個單元格的值被>改變后調(diào)用
changes：是一個2維數(shù)組包含row，prop蛉抓，oldVal庆尘，newVal4個屬性。
source：其值為一個字符串巷送，值可以為：alter驶忌，empty，>populateFromArray惩系，loadData位岔，autofill，paste
2）beforeChange (changes: Array, source: String)：開始改變單元格前被>調(diào)用
changes：是一個2維數(shù)組堡牡，包括[row抒抬，prop，oldVal晤柄，newVal]這4個公共屬>性列
source是被改變的資源的名稱
3）afterCellMetaReset ()：重置單元格后調(diào)用
4）afterColumnMove (oldIndex: Number, newIndex: Number)：列順序被>>移動后觸發(fā)
5）afterRowMove (oldIndex: Number, newIndex: Number)：行被移動后調(diào)>用
6）afterRowResize (col: Number, size: Number)：行高改變后調(diào)用
7）afterRemoveCol (index: Number, amount: Number)：當(dāng)一列或多列被>移動后調(diào)用
其中擦剑，index為開始移動的列的索引，amount為移動的列的總數(shù)量
8）afterRemoveRow (index: Number, amount: Number)：當(dāng)一行或多行被>移動后調(diào)用
其中芥颈，index為被移動的行的索引惠勒，amount為被移動的行的總數(shù)量
9）beforeRemoveCol (index: Number, amount: Number)：一列或多列被>>移動前調(diào)用beforeRemoveRow (index: Number, amount: Number)：一行或>多行被移動前被調(diào)用
10）afterColumnSort (column: Number, order: Boolean)：列排序后調(diào)用
11）beforeColumnSort (column: Number, order: Boolean)：列排序前被調(diào)用
order：值為true時為升序，false時為降序
12）afterCreateCol (index: Number, amount: Number)：添加行后被調(diào)用
index：新列的索引
amount：新列的數(shù)目
13）afterCreateRow (index: Number, amount: Number)：添加行后被調(diào)用
index:新行的索引
amount：新行的數(shù)目
14）afterGetCellMeta (row: Number, col: Number, cellProperties: >Object)：獲取單元格的配置信息后被調(diào)用
15）beforeGetCellMeta (row: Number, col: Number, cellProperties: >Object)：獲取單元格屬性前被調(diào)用
16）afterSetCellMeta(row: Number, col: Number, key: String, value: *)：單>元格樣式被改變后調(diào)用
其中爬坑，cellProperties是一個單元格的渲染對象纠屋，key是改變樣式的方式，例>如合并單元格（merge）盾计，水平對齊（align）等售担。
17）afterGetColHeader (col: Number, TH: DOM Node)：獲取列頭信息后被>調(diào)用，TH是行頭節(jié)點
18）afterGetColWidth (col: Number, response: Object)：獲取列寬后被調(diào)用
19）afterColumnResize (col: Number, size: Number)：列寬度被手動修改后調(diào)用
20）afterCopyLimit (s-electedRowsCount: Number, s-electedColsCount: Number,copyRowsLimit: Number, copyColsLimit: Number)
當(dāng) copyRowsLimit 或者 copyColumnsLimit實現(xiàn)時被調(diào)用
21）afterDestroy ()：銷毀Handsontable實例后被調(diào)用
22）afterInit ()：Handsontable實例被初始化后調(diào)用
23）beforeInit ()：Handsontable實例被初始化前調(diào)用
24）beforeInitWalkontable()：Walkontable實例被初始化前調(diào)用
25）afterLoadData ()：新的數(shù)據(jù)被加載到數(shù)據(jù)資源后被調(diào)用afterOnCellCornerMouseDown (event)：鼠標(biāo)點擊單元格邊角后被調(diào)用
26）afterOnCellMouseDown (event: Object, coords: Object, TD: Object)：>點擊單元格或行頭/列頭后被調(diào)用
注意：點擊行頭或列頭后索引的坐標(biāo)為負(fù)數(shù)署辉。例如點擊列頭單元格(0,0)族铆，則>調(diào)用后的坐標(biāo)為(0,-1)。
27）afterOnCellMouseOver (event: Object, coords: Object, TD: Object)：鼠標(biāo)>停懸在單元格或行頭/列頭后調(diào)用
注意：點擊行頭或列頭后索引的坐標(biāo)為負(fù)數(shù)哭尝。例如點擊行頭單元格(0,0)哥攘，>則調(diào)用后的坐標(biāo)為(0,-1)。
28）afterRender (isForced: Boolean)：渲染表格后被調(diào)用
isForced：當(dāng)其值為true表示是通過改變配置或數(shù)據(jù)引起的渲染材鹦，當(dāng)值為>false時表示通過滾動或移動逝淹、選中引起的渲染
29）beforeRender (isForced: Boolean)：渲染前被調(diào)用
30）afterRenderer (TD: Object, row: Number, col: Number, prop: String, >value: String, cellProperties: Object)：手動渲染后調(diào)用
31）beforeChangeRender ()：渲染被改變前調(diào)用
32）afterDes-elect ()：當(dāng)前單元格被取消選中時調(diào)用
33）afterS-election (r: Number, c: Number, r2: Number, c2: Number)：當(dāng)>一個或多個單元格被選中后調(diào)用
其中，r：選中的單元格起始行桶唐，r2：選中單元格的終止行
c：選中的單元格的起始列栅葡，c2：選中的單元格的終止列
34）afterS-electionByProp (r: Number, p: String, r2: Number, p2: String)：>通過屬性名選中單元格后調(diào)用afterS-electionEnd (r: Number, c: Number, r2: >Number, c2: Number)：選中單元格鼠標(biāo)抬起后調(diào)用
afterS-electionEndByProp (r: Number, p: String, r2: Number, p2: String)：通>過屬性選中單元格鼠標(biāo)抬起后調(diào)用
35）afterUpdateSettings ()：配置參數(shù)配修改后調(diào)用
36）afterValidate (isValid: Boolean, value: Mixed, row: Number, prop: >String,source: String)
當(dāng)有驗證器的時候調(diào)用驗證器時被調(diào)用，驗證結(jié)果作為第一個參數(shù)莽红。
37）beforeValidate (value: Mixed, row: Number, prop: String, source: >String)：驗證器被調(diào)用前調(diào)用該事件
38）beforeAutofill (start: Object, end: Object, data: Array)：開始自動填充前調(diào)動
start：是一個第一個填充的單元格對象妥畏，例如:{row:4,col:3}
end：是最后一個填充的單元格對象邦邦，例如：{row:7,col:5}
data:是一個2維數(shù)組
39）beforeKeyDown (event: Object)：按鍵按下前被調(diào)用
40）beforeSet (var: Object)：單個配置值被設(shè)置前調(diào)用
41）beforeSetRangeEnd(coords: Array)：設(shè)置范圍結(jié)束前被調(diào)用coords：是范圍坐標(biāo)
42）modifyCol(col: Number)：列被修改時調(diào)用
43）modifyRow( row: Number)：行被修改時調(diào)用
44）modifyColWidth (width: Number, col: Number)：列寬被修改時調(diào)用
45）modifyRowHeight (height: Number, row: Number)：行高被修改時調(diào)用
