uniapp根据输入的行数列数动态生成宫格排列元素

上效果图：

示例代码：

<template>
	<view class="container">
		<view class="wrapper">
			<view class="form">
				<view class="formItem flexRowCenterAll">
					<view class="label">
						报价单名称：
					</view>
					<view class="ctn">
						<u--input
						    placeholder="报价单名称"
						    border="surround"
						  ></u--input>
					</view>
				</view>
				<view class="formItem flexColumn">
					<view class="label">
						报价单样式
					</view>
					<view class="ctn flexRowCenterAll" style="margin-top: 16rpx;">
						<view class="formItem1 flexRowCenterAll">
							<view class="label1">
								行数：
							</view>
							<view class="ctn">
								<u--input
								    placeholder="行数"
								    border="surround"
									v-model.number="r"
									type="number"
									@input="updateRowCol(r,c)"
								  ></u--input>
							</view>
						</view>
						<view style="margin: 0 16rpx;">
							
						</view>
						<view class="formItem1 flexRowCenterAll">
							<view class="label1">
								列数：
							</view>
							<view class="ctn">
								<u--input
								    placeholder="列数"
								    border="surround"
									v-model.number="c"
									type="number"
									@input="updateRowCol(r,c)"
								  ></u--input>
							</view>
						</view>
					</view>
				</view>
				<view class="formItem flexColumn">
					<view class="label">
						服务内容
					</view>
					<view class="ctn" style="margin-top: 16rpx;">
						<view class="content">
							<view v-for="(item,index) in rows" class="tr flexRow">
								<view v-for="(item1,index1) in columns" class="td flexColumnCenterAll">
									<uni-data-picker placeholder="服务内容" popup-title="服务内容" :localdata="dataTree" v-model="classes"
										@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
									</uni-data-picker>
									<view style="margin: 16rpx 0;">
										
									</view>
									<u--input
										readonly
										placeholder="服务金额"
									></u--input>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				rows: null,
				columns: null,
				dataTree: [{
					text: "一年级",
					value: "1-0"
				},
				{
					text: "二年级",
					value: "2-0"
				},
				{
					text: "三年级",
					value: "3-0"
				}],
				r: null,
				c: null
			}
		},
		methods:{
			updateRowCol(rows,columns){
				if(Number(rows) > 0){
					rows > 4 && (rows = 4)
					let start = 0; // 起始值
					let end = Number(rows);
					const array = Array.from(
					    { length: (end - start) }, 
					    (_, index) => start + index
					);
					this.rows = array
				}
				if(Number(columns) > 0){
					columns > 4 && (columns = 4)
					let start1 = 1; // 起始值
					let end1 = Number(rows);
					const array1 = Array.from(
					    { length: (end1 - start1) }, 
					    (_, index) => start1 + index
					);
					this.columns = array1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.wrapper{
			background: rgba(255,255,255,1);
			.form{
				.formItem{
					padding: 36rpx 68rpx;
					border-bottom: 2rpx solid rgba(187,187,187,1);
					.label{
						min-width: 144rpx;
						color: rgba(16,16,16,1);
						font-size: 24rpx;
						font-weight: bold;
					}
					.ctn{
						flex: 1;
					}
				}
			}
			.content{
				width: 100%;
				.tr{
					&:first-child{
						.td:first-child{
							border-radius: 40rpx 0 0 0;
						}
						.td:last-child{
							border-radius: 0 40rpx 0 0;
						}
					}
					&:last-child{
						.td:first-child{
							border-radius: 0 0 0 40rpx;
						}
						.td:last-child{
							border-radius:  0 0 40rpx 0;
						}
					}
					.td{
						background: white;
						flex: 1;
						min-height: 200rpx;
						color: rgba(16,16,16,1);
						font-size: 24rpx;
						border: 2rpx solid rgba(234,234,234,1);
						padding: 16rpx;
					}
				}
			}
		}
	}
</style>

 注意：直接用  r  c  两个变量去生成会有问题！！！！后来替换成用  r  c 变量生成的指定范围的数组去渲染了

相关文章：js 生成指定范围内的数组-CSDN博客