uni-app uv-form-item动态表单form开发方法

 uni-app uv-form-item动态表单form开发方法

因为在开发中，发现uni-app、uv-ui中没有找到我想要相关的功能，自主研究时，

制定了一个方法可以重复新增项功能

<uv-form :model="form" ref="form" :rules="rules">

<view v-for="(item, index) in form.projectcontactArr" :key="index">
    <view @click="addContact(index+1)">新增项</view>
</view>

data() {
    return {
      barHeight: 0,
      //1新增2编辑
      entranceType: null,
      form: {
				 projectcontactArr:[
					{
						role:null,
						roleName:null,
						name:null,
						phone:null,
						gender:null,
						genderName:null
					}
				],
			},
      rules: {
				'projectcontactArr.0.roleName': [
					{ type: 'string',required: true, message: '请选择...', trigger: ['blur', 'change'] },
				],
				'projectcontactArr.0.name': [
					{ type: 'string',required: true, message: '请输入...', trigger: ['blur', 'change'] },
				],
				'projectcontactArr.0.phone': [
					{ type: 'string',required: true, message: '请输入...', trigger: ['blur', 'change'] },
				],
				'projectcontactArr.0.genderName': [
					{ type: 'string',required: true, message: '请选择...', trigger: ['blur', 'change'] },
				]
			}
    };
  }

1、在uv-form-item中prop设置规则

eg：

        :prop="'projectcontactArr.' + index + '.roleName'"

2、uv-input等相关组件v-model中设置规则

eg：

        v-model="item.roleName"

3、新增项方法

addContact(e) {
      this.form.projectcontactArr.push({
				role:null,
				roleName:null,
				name:null,
				phone:null,
				gender:null,
				genderName:null
      });
			let role = `projectcontactArr.${e}.roleName`
			let name = `projectcontactArr.${e}.name`
			let phone = `projectcontactArr.${e}.phone`
			let gender = `projectcontactArr.${e}.genderName`
			let getjson = {
				role: [
					{ type: 'string',required: true, message: '请选择...', trigger: ['blur', 'change'] },
				],
				name: [
					{ type: 'string',required: true, message: '请输入...', trigger: ['blur', 'change'] },
				],
				phone: [
					{ type: 'string',required: true, message: '请输入...', trigger: ['blur', 'change'] },
				],
				gender: [
					{ type: 'string',required: true, message: '请选择...', trigger: ['blur', 'change'] },
				]
			}
			this.rules[role] = getjson.role
			this.rules[name] = getjson.name
			this.rules[phone] = getjson.phone
			this.rules[gender] = getjson.gender
    },