uniapp 实现向下追加数据功能

遇见小美好y2026-03-12 14:14

uniapp 实现向下追加数据功能

复制代码

<view class="orders-desc" style="border:none;">
		<text class="form-left">携转号码</text>
		<view style="width:75%;">
			<view class="spec-item" v-for="(item, index) in xiezhuanlist" :key="index">
			  <view class="spec-values">
			    <view class="tag" v-for="(tag, tagIndex) in item.values" :key="tagIndex">
			      <input type="text" v-model="tag.value" placeholder="请输入携转号码" maxlength="11" />
			      <text class="remove-icon" @click="removeValue(index, tagIndex)">X</text>
			    </view>
			  </view>
			</view>
		</view>
	</view>
	<view class="xiezhuanbtn" @click="addxiezhuan">追加</view>

js部分

复制代码

data() {
	return {
		xiezhuanlist:[],
		turnphone:'',
	}
}，
methods: {
	//追加
	addxiezhuan() {
		  this.xiezhuanlist.push(
			{
				values:[{
					text:"1"
				}]
			}
		  );
		},
		removeValue(index, valueIndex) {
			console.log(index, valueIndex);
			this.xiezhuanlist[index].values.splice(valueIndex, 1);
		},
		//提交
        submit(){
        		//获取turnphone 的值
			this.turnphone = this.xiezhuanlist.flatMap(group => {
					return group.values.map(item => item.value.trim()) // 去空格
						.filter(val => val !== '').map(val => ({ turnphone: val })); // 转换成 {turnphone: xxx}
				});
		}
}