uni、css——制作表格样式的模型

案例展示

这里以5列做展示（可随意调节）

案例代码

<view class="list">
	<view class="item" v-for="(item,index) in list" :key="index">1</view>        <!-- 有内容 -->
	<view class="item" v-for="(item,index) in empty_list" :key="index"></view>   <!-- 空展示 -->
</view>

.list {
    
    
	border: 1px solid red;
	margin: 24rpx;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: rgba(255, 255, 255, 0.87);

	.item {
    
    
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 173rpx;
		justify-content: center;
		border-bottom: 1rpx solid red;
		border-right: 1rpx solid red;
	}

	.item:nth-last-child(-n+5) {
    
    
		border-bottom: none;
	}

	.item:nth-child(5n) {
    
    
		border-right: none;
		border-bottom: 1rpx solid red;
	}

	.item:nth-last-child(1) {
    
    
		border-bottom: none;
	}
}

核心代码

const list = ref(13)  //假设有13个
const empty_list = ref(0)  //空格子默认0个
onReady(() => {
    
    
	empty_list.value = 5 - list.value % 5   //空格子的个数为：13 对5取余 为3，也就是说最后一排5个格子只有3个有内容，没内容的格子为5减去3等于2个，所以empty_list为2
})