vue引入Excel表格插件的方法

更新時間：2021年04月28日 17:11:15 作者：涼夕小主

這篇文章主要為大家詳細介紹了vue引入Excel表格插件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

一、安裝

npm install handsontable-pro @handsontable-pro/vue
npm install handsontable @handsontable/vue

二、引用(在頁面引用)

import { HotTable } from ‘@handsontable-pro/vue'
import ‘…/…/node_modules/handsontable-pro/dist/handsontable.full.css'
import Handsontable from ‘handsontable-pro'

三、使用（在標簽中使用）

<div id="hotTable" class="hotTable">
    <HotTable  ref="hotTableComponent" :settings="hotSettings"></HotTable>
</div>

四、數(shù)據(jù)中定義

data () {
    return {
      list: [],
      root: 'test-hot',
      hotSettings: {
        data: [ // 數(shù)據(jù)可以是二維數(shù)組，也可以是數(shù)組對象
        ],
        startRows: 3, // 行列范圍
        startCols: 3,
        minRows: 20, // 最小行數(shù)
        minCols: 5, //最小列數(shù)
        maxRows: 20, // 最大行列
        maxCols: 20,//最大列數(shù)
        rowHeaders: true, // 行表頭，可以使布爾值（行序號），可以使字符串（左側(cè)行表頭相同顯示內(nèi)容，可以解析html），也可以是數(shù)組（左側(cè)行表頭單獨顯示內(nèi)容）。
        colHeaders: ['賬戶等級', '賬戶名稱', '賬戶編號', '賬戶類別'], // 自定義列表頭or 布爾值
        minSpareCols: 0, // 列留白
        minSpareRows: 0, // 行留白
        currentRowClassName: 'currentRow', // 為選中行添加類名，可以更改樣式
        currentColClassName: 'currentCol', // 為選中列添加類名
        autoWrapRow: true, // 自動換行
        className: 'htCenter htMiddle', // 默認單元格樣式，垂直居中
        contextMenu: {
          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: '表格線'
            },
            'copy': {
              name: '復制'
            },
            'cut': {
              name: '剪切'
            },
            'commentsAddEdit': {
              name: '添加備注'
            },
            'commentsRemove': {
              name: '取消備注'
            },
            'freeze_column': {
              name: '固定列'
            },
            'unfreeze_column': {
              name: '取消列固定'
            },
            'mergeCells': {
              name: '合并單元格'
            },
            'alignment': {
              name: '文字位置'
            },
            'hsep2': '---------'
          }
        },
        afterChange: function (changes, source) { // 數(shù)據(jù)改變時觸發(fā)此方法
          // console.log(this.getSourceData())
          this.list = this.getSourceData() // 獲取表格里的數(shù)據(jù)
          // console.log(this.getPlugin('MergeCells').mergedCellsCollection.mergedCells) // 獲取表格合并單元格的參數(shù)
        },
        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：默認不擴展
        fillHandle: true, // 選中拖拽復制 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: [ // 設置表頭名稱
          {
            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)
    }
},

重點:

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: