この記事では、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 データベースのインポートおよびエクスポート コマンドを実装する方法
各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...
MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...
アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...
この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...
最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...
序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...
目次1. Vueフロントエンドを構成する1. クロスドメイン構成を開発する2. 本番環境のクロスドメ...
崇高なSublime Text はコード エディター (Sublime Text2 は有料ソフトウェ...
絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...
序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...
序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...
NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...
1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...
1つ。 Mysql Binlog フォーマットの紹介 Mysql binlog ログには、State...
しばらくサーバーいじってなかったけど、やることがなくなったのでモバイルワークスに行って海外サーバーを...