vue+canvas で Excel のようなコンポーネントを使用する方法-jsチュートリアル-php.cn

vue コンポーネントは、Vue に基づいたテーブルコンポーネントであり、主に大量のデータのテーブルレンダリングのパフォーマンスの問題を解決します。キャンバスを使用してテーブルを描画し、Excel のようなバッチ選択、コピー＆ペーストの削除、リアルタイム編集をサポートします。この記事では主に vue+canvas ベースの Excel 風のコンポーネントを紹介します。必要な方は、

vue ベースのテーブルコンポーネントを参照してください。これは、主に大量のテーブルのレンダリングパフォーマンスの問題を解決します。キャンバスを使用して表を描画し、Excel のようなバッチ選択、コピー＆ペースト削除、リアルタイム編集などの機能もサポートします。

vue-grid-canvas

NPM / Yarn

をインストールします:npm install vue-canvas-grid --save

それからプロジェクトにインポートします

インポート'vue' から Vue

'vue-canvas-grid' からグリッドをインポート

Vue.component('grid', Grid)

使用方法

次のように使用するだけです:

ログイン後にコピー

説明

1 、キャンバスを通じて実装され、数万のデータを処理できます2、Excel と同様、セルを選択してリアルタイムで編集します3、コピーアンドペースト、バッチをサポート、Excel からコピー、Excel にコピー

4、元に戻す/転送

5、チェックボックス、すべての機能を選択、切り替え可能
6、固定列（現在は右への固定のみをサポート）
7、セルの削除、バッチをサポート
7、テキストの再計算とレンダリングをサポート（計算されたセルはサポートされていません）リアルタイム編集)
8、基本的なボタン表示とクリックイベントをサポートします
9、列機能を非表示にし、オンとオフを切り替えることができます
##TODO:

1、キャンバスの使用はブラウザの検索機能をサポートしていないため、将来的にはテーブル検索機能も追加予定です
2、行と列のドラッグ
3、基本的な数式計算

上記は皆さんのためにまとめたものですので、今後皆さんのお役に立てれば幸いです。

関連記事:

vue-ssrを使用してサーバーサイドレンダリングを実装する方法

react-routerで履歴を使用してルーティングを制御する方法(詳細なチュートリアル)

jqprintを使用してページコンテンツを印刷する方法

js を使用して WeChat を実装し、Alipay を呼び出して赤い封筒を受け取る (詳細なチュートリアル)

Gulp を使用して静的 Web ページのモジュール化を実装する方法具体的にはどうすればよいですか?

Wangwangオンラインカスタマーサービスの実装方法について

JavaScriptで多重継承を実装する方法

webpackの複数エントリファイルのパッケージ化構成を実装する方法

Webページのマウス効果を実装する方法（詳細なチュートリアル） )

vueを使用してショッピングモールを実装する方法

Vue+jqueryを使用してテーブルの指定された列のテキストを縮小する方法