コラム

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

Vue.jsでExcelライクな画面作成①の続きです。
次の機能の動画と構成・概要図を記述します。

行列のリサイズ機能
矢印キーでの自動スクロール
行追加機能

・行列のリサイズ機能

CSSのリサイズ機能を使用しています。
この機能を使うと簡単に実装可能です。


Html部分

	<div class="wrap"> ①
		<div class="table"> ②
			<table> ③
				<thead>
					<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.price" :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="spinner">ロード中...</div>-->
				<div slot="no-more"></div>
				<!--<div slot="no-results">検索結果</div>-->
			</infinite-loading>
		</div>
	</div>

① ルートDivです。
② テーブルを囲むDiv、スクロールバーはこのDivが出している
③ テーブルタグです。CSSでこのテーブルの子要素などにリサイズ機能を付けている
④ 列の幅を広げられるようにダミーの列を設けています。ここはスマートな他のやり方がありそうです。

CSS部分

.wrap {
  margin: 0 auto;
  padding: 20px;
  max-width:800px;
}

table {
  border-collapse: collapse;
  box-sizing: border-box;
  width:1400px;
}

table th {
  font-size: 16px;
  color: #333;
}

table thead th {
  border: 1px solid #CCC;
  text-align: center;
  overflow: hidden;
  background-color: #EFEFEF;
  border-top : 1px solid #CCC;
  border-left : 1px solid #CCC;
  border-right : 1px solid #CCC;
  border-bottom : 0px solid #CCC;
  resize: horizontal; ①
}

table tbody th {
  text-align: center;
  overflow: hidden;
  background-color: #EFEFEF;
  border-top : 1px solid #CCC;
  border-left : 1px solid #CCC;
  border-bottom : 1px solid #CCC;
  resize:vertical; ②
}

.table {
  max-height: 380px;
  overflow: auto; 
}

table thead th, table thead td {
  position: sticky; ③
  top: 0;
}

.tableDummy{
  max-width:1000px;
  width:auto;
}
.noBlock{
  width:20px;
}

① 横方向のリサイズの設定です。列のヘッダー部に記述します。
② 縦方向のリサイズの設定です。行のヘッダー部に記述します。
③ リサイズとは関係ないですが、この設定を使用すると列のヘッダーを固定する事が出来ます。

・矢印キーでの自動スクロール

今回は矢印キーのみでのスクロール、マウスでのセルを選択しながらのスクロールは今後の実装しようと思います。

Vue.jsでExcelライクな画面作成①での「アクティブセルのマウス、キーボードでの移動」にスクロール制御がついただけです。

・行追加・削除機能

この機能はRefを使用している関係で結構苦労しましたが、何とか実現できました。
気を付けなくてはいけない点がいくつかあります。その辺りの詳細はまた別の記事で紹介したいと思います。

行追加動画

行削除動画

行追加構成

③のキーを振りなおさないと、Ref配列の順番が画面と一致しなくなるために必要な処理です。

行削除

以上で、Vue.jsでExcelライクな画面作成の説明を終わります。
今回、このような画面を作成したのは、お客様がExcelを使用している事が多く、なるべくユーザビリティを損ねずにWeb化したという要求が多かったからです。
まだ、必要な機能はあると思いますが、都度追加して行こうと思います。
技術面での詳細は別の機会に記事にしようと思います。

続けてお読みください

[Vue3]Composition Apiでrefの配列を使用

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

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

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

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