前端实现动态表格的生成，以及表格中的动态数据

需求：

首先说一下我们的需求，我们约定一个表格的列数，以及最小行数，单元格中的数据是动态的，需要我们根据数据的多少去动态的生成对应的单元格。还有一个要求就是，如果这一行的数据只有一个，那其余单元格也必须生成边框线，内容为空。  如图所示：

需求分析：

因为数据是动态的，数据的长度是不确定的，我们需要根据数据的多少生成对应的单元格。

在vue中通过第三方库很难去实现。

之前我想到了，一个办法，就是根据数据的长度去动态的计算出生成的tr行数，以及一行的单元格数。但是出现了一个问题，就是，就是遍历到后面的数据，一行铺不满列数，所以剩余的单元格就遍历不出来了。导致缺少单元格的情况。

具体实现：

于是我又想到了另外一个办法，，完美的实现了，那就是需要写些css。不适用table标签。

直接上代码：

<scroll-view scroll-y class="tableBox">
		<view class="tables">
			<view class="item" v-for="(item,index) in boxNum" :key="index">
			    <text  v-if="dataList[index]">{{dataList[index].name}}</text>
			</view>
		</view>
</scroll-view>

boxNum: 20,//默认的单元格数
dataList: [],//数据

.tables {
		width: 100%;
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		border: 1rpx solid #333;
		border-bottom: none;
		border-right: none;
		box-sizing: border-box;
	}

.tables .item {
	width: calc(100% / 5 - 2rpx);
	height: 60rpx;
	border-right: 1rpx solid #333;
	border-bottom: 1rpx solid #333;
}

这样就可以动态的生成单元格了。然后数据长度超过了默认的单元格数，那我们就在将数据请求过来时，处理一下boxNum的值就行了。

需求的升级：

这时需要去切换表格当中的数据类型，dataList中的数据和数据长度也是变化的，如图所示：

遇到的问题：

每一类的数据都有很多，然后我们就遇到，滑动到底部，然后切换类型tab，请求到新的数据过来，我们还在底部。这是一个bug，按道理数据，在滑动到底部，切换tab，我们应该定位到顶部才是。

解决办法：

数据请求还是按照之前正常请求，但是需要先清空dataList并结合this.$nextTick实现

this.dataList = []   //先清空数据
this.boxNum = 100   //默认100个单元格5列20行 ----让滚动条置于顶部
this.$nextTick(() => {
	this.dataList = res.data
    let num = res.data.lenght < 100 ? 100 : res.data.lenght
	this.boxNum += 5 - (num%5)
})