vue开发中遇到的问题

动态表单

• 使用element的form表单，动态设置是否必填，根据接口返回字段判断显示表单内容。如果表单层级太多或者太深，会发现输入框表、单选框等 有卡顿现象。这时候初始化表单的model没用。

解决办法：尽量将表单组件化

像下面这样，动态表单，多次使用for，if判断显示。导致层级较高

优化前代码

<el-form ref="userDataOther" v-for="(item, idx) in formDynamicData" :model="followData" :key="'form' + idx" :rules="rules" :status-icon="true">
	<!-- 模块1 -->
	<el-collapse-item :name="item.compGroupSort.toString()" :key="'collapse' + item.compGroupSort + idx" v-show="item.compGroupSort == '1' && item.isValidate == 1">
	  <el-row class="form-rowMargin">
		<el-col v-for="(colItem, indCol) in item.imFormGroups" :span="colItem.compWidth" :key="'col' + item.compGroupSort + indCol" v-show="colItem.isShow == '1' ? true : false">
		  <el-form-item :label="colItem.compDisplayLabel" v-show="colItem.clamFieldCode == 'gxySymptomCode'" :prop="colItem.isRequired == 1 ? 'gxySymptomCode1' : ''">
			<el-checkbox-group v-model="followData.gxySymptomCode1">
			  <el-checkbox label="1" >测试</el-checkbox>
			  <el-checkbox label="11" >测试</el-checkbox>
			</el-checkbox-group>
		  </el-form-item>
		  <el-form-item :label="colItem.compDisplayLabel" v-show="colItem.clamFieldCode == 'tnbSymptomCode'" :prop="colItem.isRequired == 1 ? 'tnbSymptomCode1' : ''">
			<el-checkbox-group v-model="followData.tnbSymptomCode1">
			  <el-checkbox label="1" >测试</el-checkbox>
			  <el-checkbox label="2" >测试</el-checkbox>
			</el-checkbox-group>
		  </el-form-item>
                ......
		</el-col>
	  </el-row>
	</el-collapse-item>
	<!-- 模块2 -->
	<el-collapse-item :name="item.compGroupSort.toString()" :collapse="'collapse' + item.compGroupSort + idx" v-if="item.compGroupSort == '2' && item.isValidate == 1">
        <el-row class="form-rowMargin">
            <el-col v-for="(colItem, indCol) in item.imFormGroups" :key="'col' + item.compGroupSort + indCol" v-show="colItem.isShow == 1 ? true : false">
                    <el-form-item :label="colItem.compDisplayLabel" v-if="colItem.clamFieldCode == 'height'" 
				:prop="colItem.isRequired == 1 ? colItem.clamFieldCode : ''">
				<el-input :min="0" type="number" placeholder="请输入" v-model="followData.height"></el-input>
			</el-form-item>
			<el-form-item :label="colItem.compDisplayLabel" v-if="colItem.clamFieldCode == 'weight'" :prop="colItem.isRequired == 1 ? colItem.clamFieldCode : ''">
				<el-input :min="0" type="number" placeholder="请输入" v-model="followData.weight" ></el-input>
			</el-form-item>
			<el-form-item :label="colItem.compDisplayLabel" v-if="colItem.clamFieldCode == 'bmi'" :prop="colItem.isRequired == 1 ? colItem.clamFieldCode : ''">
				<el-input placeholder="请输入" v-model="followData.bmi"></el-input>
			</el-form-item>
                   ......
            </el-col>
        </el-row>
	</el-collapse-item>
  </el-form>

优化后

<el-form ref="userDataOther" v-for="(item, idx) in formDynamicData" :model="followData" :key="'form' + idx" :rules="rules" :status-icon="true">
	<!-- 模块1 -->
	<el-collapse-item :name="item.compGroupSort.toString()" :key="'collapse' + item.compGroupSort + idx" v-show="item.compGroupSort == '1' && item.isValidate == 1">
	  <el-row class="form-rowMargin">
		<el-col v-for="(colItem, indCol) in item.imFormGroups" :span="colItem.compWidth" :key="'col' + item.compGroupSort + indCol" v-show="colItem.isShow == '1' ? true : false">
		  <comp-one :item="item" :followData="followData"></comp-one>
		</el-col>
	  </el-row>
	</el-collapse-item>
	<!-- 模块2 -->
	<el-collapse-item :name="item.compGroupSort.toString()" :collapse="'collapse' + item.compGroupSort + idx" v-if="item.compGroupSort == '2' && item.isValidate == 1">
		 <el-row class="form-rowMargin">
			<el-col v-for="(colItem, indCol) in item.imFormGroups" :key="'col' + item.compGroupSort + indCol" v-show="colItem.isShow == 1 ? true : false">
				<comp-two :item="item" :followData="followData"></comp-two>
			</el-col>
		</el-r

• 动态表格 在校检表单信息时，如果模块存在条件显示，尽量使用v-show，

iframe引入本地静态html文件问题

当我们在使用iframe引入一个静态文件时，会发现他并没有访问成功，页面嵌套显示了项目的主页页面。

解决办法：

vue-cli3脚手架构建的项目，iframe在引入静态文件时，必须要在public文件下新建static文件，否则会作为网络地址访问

vue-lic2脚手架构建的项目  默认存在一个static文件