uni-app动态添加表单控件

需求:

点击

选择

uni-app动态添加表单控件_第1张图片

uni-app动态添加表单控件_第2张图片

点击➖号可以删除一栏

view层


	
		{{ tab.pro }}
			
            
	

JS层

export default {
		data() {
			return {
				company: "宁波吃炸鸡技术有限公司",
				phone: "11212121200",
				name: "",
				job: "",				
				index: 0,		//生成表单的索引						
				tabs: [],		//生成表单所有生成对象的数组,[{},{},{}]					
				tabObj: {},		//存放每一个生成表单对象
				proName: ['手机号', '邮箱', '微信', 'QQ'],
			}
		},
		components: {
		},
		methods: {
			addInner(e) {
				this.index += 1;
				this.tabs.push({
					id: this.index,
					value: ``,
					pro: `${this.proName[e]}`
				});
				console.log(this.tabs);
			},
			remove(index){
				this.tabs.splice(index,1);
			},			
			open() {
				uni.showActionSheet({
					title: "请选择你的操作",
					itemColor: "#3C64DA",
					itemList: ['手机号', '邮箱', '微信', 'QQ'],
					success: (res) => {
						this.addInner(res.tapIndex)
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			show() {
				console.log(this.tabs);
			}
		}
	}

 

你可能感兴趣的:(uni-app,前端)