この記事では、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、「horizontal」、「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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VMwareを使用したPermeateレンジシステムのインストール手順の詳細説明
>>: Linux で MySQL データベースのインポートおよびエクスポート コマンドを実装する方法
前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...
現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...
Nginxはバージョン情報を隠すだけでなく、カスタムWebサーバー情報もサポートします。まずは最終的...
例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...
序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...
MySQL 5.7.9 のインストールチュートリアルを録画してみんなと共有しましょう環境の紹介:オペ...
情報の最適化と改良は常にデザインの最初のステップです。 「これは百度アライアンスユーザーエクスペリエ...
目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...
1. Pythonのインストール1. フォルダーを作成します。 mkdir python フォルダ...
目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...
入力ボックスの値を取得する複数の方法最初の方法は、制御されていないコンポーネントの取得です2番目の方...
目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...
多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...
CentOS7 システムを使用するのは今回が初めてで、ネットワーク構成を行う際に多くの問題が発生し...
名前を格納するフィールドが GBK 文字セットを使用している場合、GBK 内部コード自体がエンコード...