解决大量的表单元素放在一个组件内是会造成页面卡顿的现象
解决方案:一个页面表单拆分成多个页面表单实现
注意事项:
1、父组件引入的子组件要有ref属性,并传入父组件v-model绑定form数据(目的整合所有子组件的form数据)
2、子组件通过props接收父组件传来的数据,watch监听父组件传来的数据, 将其深拷贝给子的v-model绑定form数据
3、子组件正常检验form表单
4、父组件提交时,子组件在父组件的验证通过this.
r
e
f
s
.
A
(
在
父
注
册
的
子
r
e
f
名
称
)
.
refs.A(在父注册的子ref名称).
refs.A(在父注册的子ref名称).refs.B(子组件form的ref名称)
代码片段:
父组件A.vue
<template>
<div class="swba_sp">
<el-form
ref="swbaForm"
:model="formCheck"
label-width="140px"
:rules="formDataRules"
>
<el-row>
<el-col :span="7">
<el-form-item label="统一社会信用代码" prop="tyshxydm">
<el-input v-model="formCheck.tyshxydm" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="组织机构代码" prop="zzjgdm">
<el-input v-model="formCheck.zzjgdm" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="申请日期" prop="sqrq">
<el-date-picker
v-model="formCheck.sqrq"
type="date"
placeholder="选择日期"
value-format="yyyyMMdd"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="3">
<el-button type="primary" @click="sp_dzcl">电子材料</el-button>
</el-col>
</el-row>
<div
class="sp_head"
style="border: 1px solid rgb(0, 121, 254);color:rgb(0, 121, 254);"
>
基本信息
</div>
<jbxx-view ref="jbxxRef" :jbxx-map="formCheck"></jbxx-view>
<div style="position: relative;left: 9.5rem;bottom: 0.68rem;">
<el-button type="primary" @click="commit_sp('swbaForm')">
确定
</el-button>
</div>
</el-form>
</div>
</template>
<script>
import { mapService } from 'ty-core/services'
import jbxxView from '@/components/swba/jbxxView'
export default {
components: {
jbxxView
},
props: {
record: {
type: Object,
default() {
return {}
}
},
spBasicInfo: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
swDialogClose: false,
formCheck: {
tyshxydm: '',
zzjgdm: '',
sqrq: '',
gsqc: ''
},
formDataRules: {
tyshxydm: [
{
required: true,
message: '请填写统一社会机构代码',
trigger: 'blur'
}
],
sqrq: [
{
required: true,
message: '请填写申请日期',
trigger: 'blur'
}
]
}
}
},
mounted() {
this.formCheck = this.spBasicInfo
},
methods: {
commit_sp(formName) {
let fromValidate = true
this.$refs.jbxxRef.$refs.spJbxxform.validate((valid) => {
if (!valid) {
fromValidate = false
}
})
const jbxxData = this.$refs.jbxxRef.jbxxForm
this.$refs[formName].validate((valid) => {
if (!valid) {
fromValidate = false
}
})
if (fromValidate) {
const allFormData = Object.assign(
{},
jbxxData,
this.formCheck
)
// console.info(allFormData)
this.saveSwbaCheck(allFormData)
}
}
},
...mapService(['swba'])
}
</script>
子组件B.vue
<template>
<div>
<el-form
ref="spJbxxform"
:model="jbxxForm"
label-width="100%"
size="mini"
label-position="left"
style="margin:10px"
:inline="true"
:rules="jbxxFormRules"
>
<el-row>
<el-col :span="6">
<el-form-item label="公司全称" prop="gsqc">
<el-input v-model="jbxxForm.gsqc" :disabled="showType"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="成立时间" prop="clsj">
<el-date-picker
v-model="jbxxForm.clsj"
type="date"
placeholder="选择日期"
value-format="yyyyMMdd"
:disabled="showType"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="企业性质" prop="qyxz">
<ty-select
v-model="jbxxForm.qyxz"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所属行业" prop="sshy">
<ty-select
v-model="jbxxForm.sshy"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="是否为支持企业" prop="sfzcqy">
<ty-select
v-model="jbxxForm.sfzcqy"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="年营业额" prop="nyye">
<ty-select
v-model="jbxxForm.nyye"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="纳税金额" prop="nsje">
<ty-select
v-model="jbxxForm.nsje"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="员工人数" prop="ygrs">
<ty-select
v-model="jbxxForm.ygrs"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="需办理备案员工人数" prop="blagrs">
<ty-select
v-model="jbxxForm.blagrs"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开展活动年限" prop="kzhdnx">
<ty-select
v-model="jbxxForm.kzhdnx"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label=活动种类" prop="gahdzl">
<ty-select
v-model="jbxxForm.gahdzl"
data="D_出生地"
filterable
properties="label1"
clearable
:disabled="showType"
></ty-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
props: {
jbxxMap: {
type: Object,
default() {
return {
gsqc: '',
clsj: '',
qyxz: '',
sshy: '',
sfzcqy: '',
nyye: '',
nsje: '',
ygrs: '',
blagrs: '',
kzhdnx: '',
gahdzl: ''
}
}
},
shType: {
type: String,
default() {
return ''
}
}
},
data() {
return {
showType: false,
jbxxForm: {
gsqc: '',
clsj: '',
qyxz: '',
sshy: '',
sfzcqy: '',
nyye: '',
nsje: '',
ygrs: '',
blagrs: '',
kzhdnx: '',
gahdzl: ''
},
jbxxFormRules: {
gsqc: [
{
required: true,
message: '请填写公司全称',
trigger: 'blur'
}
],
qyxz: [
{
required: true,
message: '请填写企业性质',
trigger: 'change'
}
],
sshy: [
{
required: true,
message: '请填写所属行业',
trigger: 'change'
}
],
sfzcqy: [
{
required: true,
message: '请填写是否为国家重点支持企业',
trigger: 'change'
}
],
nyye: [
{
required: true,
message: '请填写年营业额',
trigger: 'change'
}
],
nsje: [
{
required: true,
message: '请填写纳税金额',
trigger: 'change'
}
],
ygrs: [
{
required: true,
message: '请填写员工人数',
trigger: 'change'
}
],
blagrs: [
{
required: true,
message: '请填写备案员工人数',
trigger: 'change'
}
],
kzhdnx: [
{
required: true,
message: '请填写活动年限',
trigger: 'change'
}
],
gahdzl: [
{
required: true,
message: '请填写活动种类',
trigger: 'change'
}
]
}
}
},
watch: {
jbxxMap() {
if (this.shType) {
this.jbxxFormRules = {}
this.showType = true
}
this.jbxxForm = JSON.parse(JSON.stringify(this.jbxxMap))
}
}
}
</script>