VueにExcelテーブルプラグインを導入する方法

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. インストール

handsontable-pro を npm でインストールします @handsontable-pro/vue
npm をインストール handsontable @handsontable/vue

2. 引用(ページ上の引用)

'@handsontable-pro/vue' から { HotTable } をインポートします。
'…/…/node_modules/handsontable-pro/dist/handsontable.full.css' をインポートします
'handsontable-pro' から Handsontable をインポートします

3. 使用(ラベルでの使用)

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

4. データ内の定義

データ () {
    戻る {
      リスト: [],
      ルート: 'test-hot'、
      ホット設定: {
        data: [ // データは2次元配列または配列オブジェクトになります],
        startRows: 3, // 行と列の範囲 startCols: 3,
        minRows: 20, // 行の最小数minCols: 5, // 列の最小数maxRows: 20, // 行と列の最大数maxCols: 20, // 列の最大数rowHeaders: true, // 行ヘッダーはブール値(行番号)、文字列(左の行ヘッダーには同じコンテンツが表示され、HTML を解析できます)、または配列(左の行ヘッダーにはコンテンツが個別に表示されます)にすることができます。
        colHeaders: ['アカウント レベル', 'アカウント名', 'アカウント番号', 'アカウント カテゴリ'], // カスタム列ヘッダーまたはブール値minSpareCols: 0, // 列空白minSpareRows: 0, // 行空白currentRowClassName: 'currentRow', // 選択した行のクラス名を追加します。スタイルを変更できますcurrentColClassName: 'currentCol', // 選択した列のクラス名を追加しますautoWrapRow: true, // 自動行折り返しclassName: 'htCenter htMiddle', // デフォルトのセル スタイル、垂直中央contextMenu: {
          アイテム: {
            // '上の行': {
            // name: '上に行を挿入'
            // },
            // 'row_below': {
            // name: '下に行を挿入'
            // },
            // 'col_left': {
            // 名前: '左に列を挿入'
            // },
            // 'col_right': {
            // 名前: '右に列を挿入'
            // },
            'hsep1': '---------', // 区切り線を指定します 'remove_row': {
              名前: '行を削除'
            },
            '列を削除': {
              名前: '列を削除'
            },
            '読み取り専用にする': {
              名前: '読み取り専用'
            },
            '境界線': {
              名前:「テーブルライン」
            },
            'コピー': {
              名前: 'コピー'
            },
            'カット': {
              名前: 「カット」
            },
            'コメント追加編集': {
              名前: 'メモを追加'
            },
            'コメント削除': {
              名前: 'メモをキャンセル'
            },
            '列を固定': {
              名前: '固定列'
            },
            '列の凍結解除': {
              名前: '列の固定を解除'
            },
            'セルの結合': {
              名前: 'セルの結合'
            },
            '配置': {
              名前: 'テキストの位置'
            },
            'hsep2': '---------'
          }
        },
        afterChange: function (changes, source) { // このメソッドはデータが変更されたときにトリガーされます // console.log(this.getSourceData())
          this.list = this.getSourceData() // テーブル内のデータを取得します // console.log(this.getPlugin('MergeCells').mergedCellsCollection.mergedCells) // テーブル内の結合されたセルのパラメータを取得します},
        manualColumnFreeze: true, // 列を手動で固定しますか?
        manualColumnMove: true, // 列を手動で移動しますmanualRowMove: true, // 行を手動で移動しますmanualColumnResize: true, // 列の間隔を手動で変更しますmanualRowResize: true, // 行の間隔を手動で変更しますcomments: true, // コメントを追加しますか?
        // セル: [ // ???
        // {行: 1、列: 1、コメント: {値: 'これはテストです'}}
        // ],
        customBorders: [], // 境界線を追加 columnSorting: true, // ソート StretchH: 'all', // 幅に応じて水平に拡張、last: 最後の列のみ拡張、none: デフォルトでは拡張しない fillHandle: true, // 選択してドラッグしてコピー 可能な値: true、false、「horizo​​ntal」、「vertical」
        fixedColumnsLeft: 0, // 左の列数を固定 fixedRowsTop: 0, // 上の列数を固定 mergeCells: [ // 結合 // {row: 1, col: 1, rowspan: 3, colspan: 3}, // 結合を指定します。(1,1) から始めて、行 3 と列 3 を 1 つのグリッドに結合します // {row: 3, col: 4, rowspan: 2, colspan: 2}
        ]、
        columns: [ // テーブルヘッダー名を設定する {
            データ: 'acctLevel'
          },
          {
            データ: 'acctName'
          },
          {
            データ: 'acctNo'
          },
          {
            データ: 'acctType'
          },
        ]
      }
    }
  },

5. コンポーネントの紹介

コンポーネント:
    ホットテーブル
 },

6. 方法の使用

メソッド: {
    swapHotData: 関数 () {
      // Handsontable インスタンスは、ラッパー コンポーネントの `hotInstance` プロパティに保存されます。
      // this.$refs.hotTableComponent.hotInstance.loadData([['new', 'data']])
      console.log(this.$refs.hotTableComponent.hotInstance.getPlugin('MergeCells').mergedCellsCollection.mergedCells)
    }
},

要点:

this.$refs.hotTableComponent.hotInstance // テーブルデータを取得し、テーブルメソッドを呼び出します。****** はテーブルを指します。getPlugin('MergeCells').mergedCellsCollection.mergedCells) // セルを結合した後に必要なパラメータを取得します。

注:インターフェースを通じてデータを取得する必要がある場合は、this.hotSettings の下にデータを直接割り当てるだけです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue エクスポート Excel 機能の全プロセス記録
  • Vue で Excel インポート機能を実装する詳細な手順
  • Vue で Web ページ データを Excel にエクスポートする方法
  • VueはExcelテーブルをインポートし、インポートに失敗したデータを自動的にダウンロードします。

<<:  VMwareを使用したPermeateレンジシステムのインストール手順の詳細説明

>>:  Linux で MySQL データベースのインポートおよびエクスポート コマンドを実装する方法

推薦する

すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください

各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...

MySQL がユーザー名とパスワードの漏洩を引き起こす可能性のある Riddle の脆弱性を公開

MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...

ボタンの権限判定を実装するためのVueカスタムv-has命令

アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...

マインスイーパゲームを実装するための jQuery プラグイン (2)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...

Win10 VM 仮想マシンに Mac OS10.14 を完璧にインストールする (グラフィック チュートリアル)

最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...

Linux で Squid プロキシ サーバーを構築するための完全な手順

序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...

Vue+SpringBoot+Shiroのクロスドメイン問題を解決する

目次1. Vueフロントエンドを構成する1. クロスドメイン構成を開発する2. 本番環境のクロスドメ...

Sublime TextがUbuntuで中国語を入力できない問題の最も簡単な解決策

崇高なSublime Text はコード エディター (Sublime Text2 は有料ソフトウェ...

CSS における px、rem、em、vh、vw の違いを簡単に分析します

絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...

年末ですが、MySQL パスワードは安全ですか?

序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...

既存のMySQLデータベースの文字セットを統一する方法

序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...

vue N​​progress のプログレスバー機能を実装する際の一般的な問題

NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...

MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明

1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...

MySQL の 3 つの Binlog 形式の概要と分析

1つ。 Mysql Binlog フォーマットの紹介 Mysql binlog ログには、State...

サーバーの購入と初期構築方法

しばらくサーバーいじってなかったけど、やることがなくなったのでモバイルワークスに行って海外サーバーを...