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

		<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)
	},