uview构造最常用form表单形式并渲染成JSON形式，基于uniapp

               根据uview官网自己组建了一个最常用的表单格式，其中基本元素都有，包括如何渲染到form，官网有一些细节没有提到，在这里给大家总结一下，小白一个。

由于像下拉框，单选，多选这种，提交的value一般都是id的形式，所以这里除了最简单的input其他所提交的值一律用的id形式，因为这种在实际开发中比较常见，具体如何构建成一个完整的form下面会细说，

下面是代码以及示例图

 

<template>
<view class="">
	<view style="height: 200px;"></view>
<u-form :model="form" ref="uForm">
	<!-- 正常input ，v-model自动渲染进form,-->
	<u-form-item label="简介">
		<u-input v-model="form.intro" prop="intro"/>
	</u-form-item>
	
	<!-- 多选，其中：name代表返回的val值，需要在js里的checkboxGroupChange进行获取，手动渲染form里 -->
	<u-form-item label="水果">
		<u-checkbox-group @change="checkboxGroupChange">
			<u-checkbox
				@change="checkboxChange" 
				v-model="item.checked" 
				v-for="(item, index) in list" :key="index" 
			    :name="item.id"
			>{{item.name}}</u-checkbox>
		</u-checkbox-group>
	</u-form-item>
	
	<!-- 下拉框，其中需要有show默认值设为false，点击u-input开启show，u-input中的label代表表单显示的值，
	     需要手动进行渲染，同时form里的对应需要获取的值也需要手动渲染，需要手动渲染的有两个量-->
	<u-form-item label="下拉">
		<u-select v-model="show" mode="single-column" :list="list2" @confirm="confirm"></u-select>
		<u-input v-model="label" type="select" :border="border" @click="show = true" />
	</u-form-item>
	
<!-- 单选 -->
	<u-form-item label="味道">
		<u-radio-group v-model="form.radio">
			<u-radio v-for="(item, index) in radioList" :key="index" :name="item.id" :disabled="item.disabled">
				{{ item.name }}
			</u-radio>
		</u-radio-group>
	</u-form-item>
	
	<u-form-item label="开关">
		<u-switch v-model="form.switchVal"></u-switch>
	</u-form-item>
     
	 <u-button type="success" @click="submit">表单信息</u-button>
</u-form>
	
	
	
	
	
	
		<u-button @click="checkedAll">全选</u-button>
		
	    <view>
			<u-toast ref="uToast" />
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				intro:"",
				listcheckbox:[],
				selectId:"",
				radio:"",
				switchVal:false
			},
			show: false,
			show2:false,
			border:true,
			label:"",
			list2: [
				{
					value: '1',
					label: '江'
				},
				{
					value: '2',
					label: '湖'
				}
			],
			list: [
				{
					id:1,
					name: '苹果',
					checked: false,
					disabled: false
				},
				{   
					id:2,
					name: '香蕉',
					checked: false,
					disabled: false
				},
				{
					id:3,
					name: '橘子',
					checked: false,
					disabled: false
				}
			],
			radioList: [
						{
							id:"1",
							name: '鲜甜',
							disabled: false
						},
						{
							id:"2",
							name: '麻辣',
							disabled: false
						}
					],
		};
	},
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			// console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
	         this.form.listcheckbox=e
			 console.log(this.form.listcheckbox)
			
		},
		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = true;
			})
		},
		confirm(e) {
			this.label=e[0].label
			this.form.selectId=e[0].value
			console.log(this.form.selectId)
		},

		submit(){
			if(this.form.switchVal){
				this.form.switchVal=1
			}else{
				this.form.switchVal=0
			}
			this.$refs.uToast.show({
								title: JSON.stringify(this.form),
								type: 'success',
							})
		}
	}
};
</script>

效果图

1.对于正常u-input来说，没什么好说的，v-model所进行的是与数据进行双向绑定，直接就可以渲染到form中

所对应的就是form中的intro，其实我们要做的就是对form中的数据渲染成我们想要的形式。

2.多选checkbox

其中:name所绑定的其实就是所提交的value值，但是这里由于不是双向绑定的，所以需要在下面的方法中，自己去渲染一下

这里面有个checkboxGroupChange方法，其中参数e就是对应:name的值，所以我们这里只需要让form中的listcheckbox等于e即可。

3.下拉框

对于下拉框来说，data中除了构建之外，一般还需要三个变量，show和label，border可以根据情况设定，

其中需要把show默认值设为false，点击u-input开启show，显示出下拉框，u-input中的label代表表单中所要显示的值，需要手动进行渲染，

同时form里对应的selectId也需要手动去渲染，这里给出了一个@confirm对应method里面的confirm方法，参数e里取第一个数组即可获取对应值，

（注意：这里的话list里面必须是label和value键值对，如果需要对应数据库中的数据的话需要进行修改，官方文档里有说明）

4.单选

单选的话是可以直接通过双向绑定的形式对应form里的具体值，所对应的val为:name所对应的值。

5.开关

开关的话我这里选取的是最简单的方式，v-model可以绑定form中的值，并且在提交的时候，根据是否开关可以去设定自己想要的数据。

 

这里小白一个，由于官方文档没有具体的demo案例，这是根据官方文档自我总结出来的= =，如果有问题的话可以评论讨论一下。