コラム

[Vue.js]Vue.jsでExcelライクな画面作成①

今回Vue.jsでExcelライクに使用可能な表画面を作ってみました。
Excelを業務で使用している方も多いと思います、でもそれをWebで使える事が出来ればデータの共有等も出来て便利になり時もあると考え、まだ簡易版ですが作ってみました。
以下、その画面の紹介をしていきます。

画面イメージ

基本的にデータベースからのデータを表示し、編集追加して使用するイメージなので、項目がありそれに対応する値を編集していきます。
今回は、大量のデータを作成するのが面倒なので8種類のデータの中からランダムで200個分のデータレコードを作成しています。

機能一覧

無限スクロール機能
アクティブセルのマウス、キーボードでの移動
アクティブセルの編集
範囲選択コピー機能
行列のリサイズ機能
矢印キーでの自動スクロール
行追加・削除機能

今回用意して機能は以上です。他にもソート機能やセル色変更機能など色々考えられますので、徐々に追加して行こうと思います。

アプリケーション構造

コンポーネント説明
App.vueTable.vueコンポーネントの表示
キーボードイベントの受取と、対応するTable.vueのメソッドの呼び出し
Table.vueデータのテーブル表示
各Cellへの制御、コピー機能、行追加、無限スクロールの全ての処理のメイン部分を担当
CellやHtmlの要素をvue.jsのrefで持って、そこを経由してアクセスする
Cell.vueテーブル内のCell部分の表示
通常表示用のNormalCell.vue、入力用のInputCell.vueを切り替える
マウスイベントを受取り処理、又はTable.vueのメソッドを呼んで処理してもらう
NormalCell.vue与えられた値を表示
InputCell.vueTextAreaに与えられた値を表示
フォーカスが外れる際にCell.vueに外れた事を通知し、適切な処理をしてもらう

各機能動作イメージ・構造

無限スクロール機能

上記がスクロールのイメージです。スクロールにはVue.jsのプラグイン「vue-infinite-scroll」を使用しています。
以下、簡単に実装部分を記述します。今回は機能説明がメインなので実装の詳細は記述しません。

		<div class="table" ref="tableDiv">
			<table ref="table">
				<thead  ref="tableHead">
					<tr>
						<th class="noBlock">No</th>
						<th ref="col_0_header">ID</th>
						<th ref="col_1_header">名前</th>
						<th ref="col_2_header">カテゴリ</th>
						<th ref="col_2_header">値段</th>
						<th></th>
					</tr>
				</thead>
				<tbody ref="tableBody">
					<tr ref="row" v-for="(data,index) in viewData" :key="data.count">
						<th class="noBlock">{{index+1}}</th>
						<cell ref="col_0" :val="data.id" :row="index" :col=0 name="id" />
						<cell ref="col_1" :val="data.name" :row="index" :col=1 name="name" />
						<cell ref="col_2" :val="data.category" :row="index" :col=2 name="category" />
						<cell ref="col_3" :val="data.category" :row="index" :col=3 name="price" />
						<td><div class="tableDummy"></div></td>
					</tr>
				</tbody>
			</table>
			<!-- InfiniteLoadingコンポーネントを定義 -->
			<infinite-loading @infinite="infiniteHandler" spinner="spiral" :identifier="infiniteId">
				<div slot="no-more"></div>
			</infinite-loading>
		</div>
	infiniteHandler($state) {
		var data = this.getDatas()
		if (data == null || data.length == 0) {
			// 表示するデータが無くなった場合
			$state.complete()
		} else {
			this.offset += data.length
			// 表示するデータがある場合
			this.viewData = this.viewData.concat( data )
			$state.loaded()
		}      
	},
  //データ取得(既に用意されているデータから差分を取得する)
  //本来はaxiosなどを使用してサーバから取得する部分
	getDatas() {
		console.log(this.start + "," + this.end + "," + this.allData.length  )
		return this.allData.slice(this.offset, this.offset + this.limit)
	},

アクティブセルのマウス、キーボードでの移動

上記がアクティブセルのマウス、キーボードでの移動のイメージです。以下に動作構成図を記述します。
矢印キーでの移動と、マウスでの移動が可能です。キーボードでの移動は矢印キーを使用します。

矢印キーでの移動時

マウスでの移動時

アクティブセルの編集

上記がアクティブセルの編集のイメージです。以下に動作構成図を記述します。
キーボード入力での編集、非編集の制御と、マウスクリックでの制御が可能です。
キーボードの入力はスペースで編集モード、エンターで編集終了モードになります。

キーボード入力

マウスでの入力

・範囲選択コピー機能

上記がセルを複数選択しコピーするイメージです。以下に動作構成図を記述します。
Shiftキーを押しながら矢印キーで選択。

キーボード入力(選択部分までの構成)

マウス入力(選択部分までの構成)

コピー&ペーストまでの構成

取り敢えず今回はここまで他の機能は次回にします。

この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせはこちら
お電話でのお問い合わせ 03-5820-1777(平日10:00〜18:00)
よくあるご質問