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 データベースのインポートおよびエクスポート コマンドを実装する方法

推薦する

docker に基づいて nginxssl 設定を開始する

前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...

CSS3 で @media を使用して Web ページの適応を実現するためのサンプル コード

現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...

nginx のバージョン番号と WEB サーバー情報を隠すための解決策

Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...

MySQL テーブル全体の暗号化ソリューション keyring_file の詳細な説明

例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

CentOS 7 で RPM パッケージを使用して MySQL 5.7.9 をインストールするチュートリアル

MySQL 5.7.9 のインストールチュートリアルを録画してみんなと共有しましょう環境の紹介:オペ...

ウェブページのコアコンテンツ(画像とテキスト)の視覚的表現の紹介

情報の最適化と改良は常にデザインの最初のステップです。 「これは百度アライアンスユーザーエクスペリエ...

Vue3 コンポジション API の紹介

目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...

Linuxオペレーティングシステムは、タスクマネージャーの視覚化機能を実装するためにPythonを使用しています。

1. Pythonのインストール1. フォルダーを作成します。 mkdir python フォルダ...

Linux で rsync を使用する方法

目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...

入力ボックスの値を取得する方法のReactの例

入力ボックスの値を取得する複数の方法最初の方法は、制御されていないコンポーネントの取得です2番目の方...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

MySQL カウントを向上させる方法のまとめ

多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...

VMware 仮想マシンでの CentOS7 ネットワーク構成 (ホストのワイヤレス インターネット アクセス)

CentOS7 システムを使用するのは今回が初めてで、ネットワーク構成を行う際に多くの問題が発生し...

MySQL で中国語の文字をピンインでソートする簡単な例

名前を格納するフィールドが GBK 文字セットを使用している場合、GBK 内部コード自体がエンコード...