本文實(shí)例為大家分享了vue引入Excel表格插件的具體代碼，供大家參考，具體內(nèi)容如下

npm install handsontable-pro @handsontable-pro/vuenpm install handsontable @handsontable/vue二、引用(在頁(yè)面引用)

import { HotTable } from ‘@handsontable-pro/vue’import ‘…/…/node_modules/handsontable-pro/dist/handsontable.full.css’import Handsontable from ‘handsontable-pro’三、使用（在標(biāo)簽中使用）

<div class='hotTable'> <HotTable ref='hotTableComponent' :settings='hotSettings'></HotTable></div>四、數(shù)據(jù)中定義

data () { return { list: [], root: ’test-hot’, hotSettings: {data: [ // 數(shù)據(jù)可以是二維數(shù)組，也可以是數(shù)組對(duì)象],startRows: 3, // 行列范圍startCols: 3,minRows: 20, // 最小行數(shù)minCols: 5, //最小列數(shù)maxRows: 20, // 最大行列maxCols: 20,//最大列數(shù)rowHeaders: true, // 行表頭，可以使布爾值（行序號(hào)），可以使字符串（左側(cè)行表頭相同顯示內(nèi)容，可以解析html），也可以是數(shù)組（左側(cè)行表頭單獨(dú)顯示內(nèi)容）。colHeaders: [’賬戶(hù)等級(jí)’, ’賬戶(hù)名稱(chēng)’, ’賬戶(hù)編號(hào)’, ’賬戶(hù)類(lèi)別’], // 自定義列表頭or 布爾值minSpareCols: 0, // 列留白minSpareRows: 0, // 行留白currentRowClassName: ’currentRow’, // 為選中行添加類(lèi)名，可以更改樣式currentColClassName: ’currentCol’, // 為選中列添加類(lèi)名autoWrapRow: true, // 自動(dòng)換行className: ’htCenter htMiddle’, // 默認(rèn)單元格樣式，垂直居中contextMenu: { items: { // ’row_above’: { // name: ’上方插入一行’ // }, // ’row_below’: { // name: ’下方插入一行’ // }, // ’col_left’: { // name: ’左方插入列’ // }, // ’col_right’: { // name: ’右方插入列’ // }, ’hsep1’: ’---------’, // 提供分隔線(xiàn) ’remove_row’: { name: ’刪除行’ }, ’remove_col’: { name: ’刪除列’ }, ’make_read_only’: { name: ’只讀’ }, ’borders’: { name: ’表格線(xiàn)’ }, ’copy’: { name: ’復(fù)制’ }, ’cut’: { name: ’剪切’ }, ’commentsAddEdit’: { name: ’添加備注’ }, ’commentsRemove’: { name: ’取消備注’ }, ’freeze_column’: { name: ’固定列’ }, ’unfreeze_column’: { name: ’取消列固定’ }, ’mergeCells’: { name: ’合并單元格’ }, ’alignment’: { name: ’文字位置’ }, ’hsep2’: ’---------’ }},afterChange: function (changes, source) { // 數(shù)據(jù)改變時(shí)觸發(fā)此方法 // console.log(this.getSourceData()) this.list = this.getSourceData() // 獲取表格里的數(shù)據(jù) // console.log(this.getPlugin(’MergeCells’).mergedCellsCollection.mergedCells) // 獲取表格合并單元格的參數(shù)},manualColumnFreeze: true, // 手動(dòng)固定列 ?manualColumnMove: true, // 手動(dòng)移動(dòng)列manualRowMove: true, // 手動(dòng)移動(dòng)行manualColumnResize: true, // 手工更改列距manualRowResize: true, // 手動(dòng)更改行距comments: true, // 添加注釋 ?// cell: [ // ???// {row: 1, col: 1, comment: {value: ’this is test’}}// ],customBorders: [], // 添加邊框columnSorting: true, // 排序stretchH: ’all’, // 根據(jù)寬度橫向擴(kuò)展，last:只擴(kuò)展最后一列，none：默認(rèn)不擴(kuò)展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）開(kāi)始行3列3合并成一格 // {row: 3, col: 4, rowspan: 2, colspan: 2}],columns: [ // 設(shè)置表頭名稱(chēng) { data: ’acctLevel’ }, { data: ’acctName’ }, { data: ’acctNo’ }, { data: ’acctType’ },] } } },五、引入組件

components: { HotTable }，六、方法中使用

methods: { swapHotData: function () { // The Handsontable instance is stored under the `hotInstance` property of the wrapper component. // this.$refs.hotTableComponent.hotInstance.loadData([[’new’, ’data’]]) console.log(this.$refs.hotTableComponent.hotInstance.getPlugin(’MergeCells’).mergedCellsCollection.mergedCells) }},

重點(diǎn):

this.$refs.hotTableComponent.hotInstance // 獲取表格數(shù)據(jù)，調(diào)用表格方法， ****** 指向表格getPlugin(‘MergeCells’).mergedCellsCollection.mergedCells) // 獲取合并單元格之后需要的參數(shù)

注意：需要接口獲取數(shù)據(jù)直接對(duì)this.hotSettings下data賦值就行

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。